search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

ListBoxButton remains active on mouse exit #3405

Closed c0rb closed 2 months ago

c0rb commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.2

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/beautiful-http-tkrqn9

Describe your issue

After selecting options the Listbox button is still active when moving the mouse outside the Listbox. Might be an issue only when using multiple. It requires an additional click outside to make it inactive. This is a regression from version 1.7.19

RobinMalfait commented 2 months ago

Hey!

I'm not 100% sure what you mean, but there are 2 things I can think about:

1. Do you mean that the ListboxButton has a data-active attribute while it's still open?

If so, that's on purpose, this is because the Listbox is still in an open state and you can style it accordingly. This is how it looks on macOS for example:

image

2. Do you mean that 2 clicks are required to click on "save"?

If so, then the 2 clicks are required to:

  1. To close the Listbox
  2. To being able to click on the "save" button

This is also done on purpose, the Listbox now opens by default in modal mode. This means that when the Listbox is open that you can't scroll the page, and can't interact with any other elements (other elements are marked as inert, which means that you can interact with them at all).

The first click is required to close the Listbox, which then also removes the inert from all other elements. This now enables the "save" button again. The next click is required to interact with the "save" button.

If you don't want this behavior, then you can set the modal functionality to false (https://headlessui.com/react/listbox#listbox-options).

Hope this helps!