Listbox component allow deselecting a single-select value

[slavatarsyurimi]

Hello,

I'm currently tweaking around a Headless UI Listbox (Select) component in order to allow for empty values. This doesn't seem like a crazy feature to have. vue-multiselect for example exposes an allowEmpty prop.
Making the input modelValue nullable and showing a placeholder when the value is empty seems to work out easy enough. However, once a value is selected it can't be deselected.

The issue also disappears when allowing for select multiple items. In this case deselecting the last selected value works just fine. This, however, potentially raises another question - how would I go about preventing a user from deselecting the last selected item in a multiselect listbox component?

At the moment I cannot find any reference in the documentation for enabling or restricting empty selection. Does anyone have any insight in this?

[andredewaard]

I dont know if this is good practice to do but i have this working with:

        <ListboxOption
          v-for="option in filteredOptions"
          :key="option.value"
          :value="option"
          as="template"
          v-slot="{ active, selected }"
          @click="unselect"
        >

function unselect() {
 // Reset value
  if (modelValue.value) modelValue.value = undefined
}