search

tailwindlabs / tailwindui-vue

Deprecated, please use the Headless UI repo instead.
https://github.com/tailwindlabs/headlessui/
647 stars 29 forks source link

Use plain div as a ListBoxButton #7

Closed pricecurrent closed 3 years ago

pricecurrent commented 4 years ago

As mentioned in #5 there is a bug in FireFox when selecting a list item with a spacebar it would automatically re-open the ListBoxList because FireFox and Safari both issue additioinal click event on space bar key down on a button element.

Additionally, clicking the ListBoxButton while having the ListBoxList open, would result into the same bug. In FireFox the button is not focused by default when it's clicked . Which makes the relatedTarget for focusout event to be null in this case.

This PR updates the HTML element for ListBoxButton to be plain div with role="button" and tabindex="0" which fixes both issues.

SergioCrisostomo commented 4 years ago

There is a good point to use the HTML semantic element for a "button" functionality. Could debouncing the common callback handler to click and space be a solution here? It would "anyway" be usable since users might by mistake click/space multiple times, and would make one event of the buggy behaviour fire and not both

RobinMalfait commented 3 years ago

Hey! I'm deprecating this repository in favor of the Headless UI repo. If this PR is still applicable, please re-open the PR in the new repository. Thank you!