Robin Malfait 4e5190d65d Fix refocus button bug (#256)
* fix outside click on span inside button works as expected

We have `outside click` behaviour implemented. Whenever the target
element is focusable we make sure that the newly clicked/focused element
stays focused. If it is not a focusable element we will make sure that
the Menu/Listbox button is re-focused so that screenreader users don't
get confused.

This is all fine, but it turns out that when you have a button with a
span, and you click on the span, then the event.target will be that
span. The span itself is not focusable of course, but the button will
get the focus. This results in the Menu/Listbox button being re-focused
which is incorrect.

For this we will introduce a FocusableMode on the `isFocusableElement`,
we will have a `Strict` mode, which means the actual element should be
focusable. And a `Loose` mode, which means that the actual element can
be inside a focusable element. E.g.: A span within a button.

* rename menu to listbox

Copy paste can be fun sometimes

* update changelog
2021-04-02 15:55:15 +02:00
2021-03-22 15:01:38 +01:00
2021-01-30 14:46:54 +01:00
2021-04-02 15:55:15 +02:00
2020-09-16 18:19:33 +02:00
2020-09-16 18:19:33 +02:00
2021-04-02 15:55:15 +02:00
2020-09-16 18:19:33 +02:00
2021-02-11 19:36:20 +01:00
2020-09-16 18:19:33 +02:00
2021-04-02 15:18:47 +02:00

Headless UI

A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Packages

Name Version Downloads
@headlessui/react npm version npm downloads
@headlessui/vue npm version npm downloads
S
Description
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Readme 6.5 MiB
Languages
TypeScript 95.3%
Vue 4.3%
JavaScript 0.3%
Shell 0.1%