[Bug]: Headless UI Vue > Listbox: Disabled Option in focus after click + arrow navigation

[simonswiss]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

^1.2.0

What browser are you using?

Chrome, Safari

Reproduction repository

https://github.com/simonswiss/headlessui-vue-listbox-disabled-item-focus

Describe your issue

When clicking on a disabled ListboxOption item, the item enters in focus (with slightly different behaviours in different browsers, see repro README).

The assumption is that an element with a disabled="true" attribute should never be focusable/focused.

The repro README has instructions on how to reproduce the issue.

[RobinMalfait]

Yep, good catch!

This should be fixed, and will be available in the next release.
You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

[ITsvetkoFF]

just a note here: for accessibility reasons this might be considered feature, not a bug. example 1 example2 (see the second one)

the reason is simple - if you're navigating using keyboard - you'll never know there is an item.