SelectButton: allowEmpty does not stop unselecting

[cmcnicholas]

Describe the bug

When using the SelectButton and :allow-empty="false" a user can still deselect the currently selected item by clicking it again.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-htijut?file=src%2FApp.vue

PrimeVue version

4.0.4

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome

Steps to reproduce the behavior

1. Specify :allow-empty="false" on SelectButton
2. Try to deselect the value

Expected behavior

:allow-empty="false" should restrict the user from deselecting

[samuelwei]

I have looked into the issue and checked the version of PrimeVue mentioned in the problem. PrimeVue 4.1.1 does not reproduce the bug, but 4.2+ does.

@cmcnicholas You specified the version in the package.json with "^", this does not set the version to a specific version but allows for all newer minor versions according to SemVer.

[btaens]

I'm using 4.2.2 and still experiencing the issue.

[TobiasKiehnlein]

I’m still encountering this issue in version 4.2.3.

As a temporary workaround, I reset the value once it’s unselected:

watch(
  value,
  (newValue, oldValue) =>
    newValue === null && setTimeout(() => (value.value = oldValue), 0)
);

Here’s a StackBlitz example.

While this approach is far from ideal, it gets the job done until the issue is resolved.

[Winter979]

Did some poking at source code and found the issue.

// ToggleButton.vue

onChange(event) {
    if (!this.disabled && !this.readonly) {
        this.writeValue(!this.d_value, event);
        this.$emit('change', event);
    }
},

The internal state of the button gets set to false and is causing the 'selected' status to be removed, however the actual model-value of the SelectButton doesnt get updates since it gets blocked.

Not sure best approach on how to resolve this without using a prop thats basically a canToggleOff

So luckily its just a visual bug, but still annoying

[TobiasKiehnlein]

@Winter979 My approach to fixing this issue was to override the onChange method of the ToggleButton when used inside the SelectButton, as shown in #6857.

Another approach I tried, which worked as well, involved adding a managesInternalState flag to disable the internal state of the ToggleButton. However this doesn't feel very clean.

So I'm not quite sure how to resolve this issue if the maintainers don't like the way I overrode the onChange method. Maybe theres a better/other way to override the onChange method that I'm not aware of but otherwise I don't think we can do much. The issue primarily arose due to changes made to enable ToggleButton to work inside forms, so it has to manage it's own value in some way.

[DucThu-Dev]

This option works in 4.0.0 version, but not in 4.2.1