Custom ListboxOption

[joemaylor]

Hi,

I'd really like to be able to implement a custom ListboxOption which doesn't have the same data binding interaction as default, but does have the same keyboard interaction / accessibility as the default.

My use case is that I have a multiselect Listbox, and I want to have a custom option at the top of my ListboxOptions that toggles select all / deselect all.

I tried two approaches but both have downsides. I'm using headlessui with Vue 3 so will use that in my example but I guess the same applies with React.

First of all, adding a custom non-ListboxOption component at the top of my ListboxOptions:

<ListboxOptions>
  <li @click="toggleSelectAll">
    Select All
  </li>
  <ListboxOption v-for="item in items" ... />
</ListboxOptions>

With this approach, the select all works when clicking the option, but using keyboard navigation sees this option skipped, so it's not feasible from an accessibility standpoint.

Second approach was to try and use the ListboxOption, for better UX

<ListboxOptions>
  <ListboxOption @click="toggleSelectAll">
    Select All
  </ListboxOption >
  <ListboxOption v-for="item in items" ... />
</ListboxOptions>

The keyboard navigation works here, however I was unable to suppress the built-in effects on the bound data object. I tried using combinations of @click.prevent and @click.stop modifiers but no luck.

e.g. suppose I have the following simple Listbox usage.

<script setup>
const items = ref([
  'banana',
  'orange',
  'apple',
])

const fruit = ref([])

function toggleSelectAll() {
  if (allSelected)
    fruit.value = []
  else
    selectAllItems()
}

watch(fruit, fruit => console.log(fruit))
</script>

<template>
<Listbox v-model="fruit" multiple>
 ...
  <ListboxOptions>
    <ListboxOption value="SELECT_ALL_FOR_CONSOLE" @click.stop.prevent="toggleSelectAll">
      Select All
    </ListboxOption >
    <ListboxOption v-for="item in items" ... />
  </ListboxOptions>
...
</Listbox>
</template>

In this scenario, clicking my select all button twice produces the following console output:

['banana', 'orange', 'apple'] <- model changed in toggleSelectAll function
['SELECT_ALL_FOR_CONSOLE'] <- model changed by adding undefined to bound fruit object (default ListboxOption functionality).

['banana', 'orange', 'apple'] <- model changed in toggleSelectAll function
[] <- model changed by adding undefined to bound fruit object

Ideally there would be an option to suppress the default behaviour of a ListboxOption, so it can have custom functionality, but also work nicely with keyboard navigation and accessibility.

e.g. some prop like suppress-default-behaviour

<ListboxOptions>
  <ListboxOption suppress-default-behaviour @click="toggleSelectAll">
    Select All
  </ListboxOption >
  <ListboxOption v-for="item in items" ... />
</ListboxOptions>

[vincerubinetti]

This is sorely needed. Related requests:

#2588
#1706

I'm working around this by just having a select/deselect all button completely outside of headless (but still within the same containing element with an aria-label), but I'm not sure how accessible this is. Might be a confusing pattern for screen reader users.

While this library is very well made and clean, unfortunately I'm finding it to have large feature gaps and be only suitable for the most basic of use cases.