SelectButton in PrimeVue 4.x can always be deselected.

[BrutalSoloH]

I have this code:

<SelectButton v-model="config.cardOrder" :options="optCardOrder" option-label="label"
                                    option-value="value" :allow-empty="false" />

But still I can deselect all options while allowEmpty = false. What am I doing wrong?

[j0rgedev]

Hey @BrutalSoloH could you share the config.cardOrder value?

[BrutalSoloH]

It's defined like this..

export enum CardOrder {
    alternating = 1,
    ranksuit = 2,
};

export class Config {
    cardOrder = CardOrder.alternating;
};

const config = reactive(new Config()) as Config;

app.provide('config', config)

....

const config = inject<Config>("config")!
const optCardOrder = computed(() => [{
    label: "Alternating",
    value: CardOrder.alternating
}, {
    label: "By Rank,
    value: CardOrder.ranksuit
}]);
.... 

<SelectButton v-model="config.cardOrder" :options="optCardOrder" option-label="label"
                                    option-value="value" :allow-empty="false" />

If I deselect the option (so nothing is selected anymore) then the value of config.cardOrder remains the value of the last selected option.
What I can see from the vue inspector is that the underlying ToggleButton's d-value gets set to false, but it's modelValue remains true.

[j0rgedev]

Isn't that the correct behavior? If allow-empty is false, then the card order would never be null, and it'll remaing the last selected value. What value are you expecting?

[BrutalSoloH]

The value is expected, but visually none of the buttons are selected, so the user doesn’t know what value is selected.
Example: when the left button is down (selected) and you click on it, it will become up or deselected. The value remains the same.