search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
344 stars 11 forks source link

Popover inside a portal doesn't get keyboard focus #66

Closed Merott closed 10 months ago

Merott commented 1 year ago

Use Version Use version when bugs appear:

Describe the bug

When using headlessui-float with the portal option to render a popover, the popover doesn't receive keyboard focus as it should.

To Reproduce

See this on StackBlitz

Toggle the use of a portal with the checkbox, and try navigating with your keyboard.

ycs77 commented 10 months ago

Hi @Merott, I think this is not a bug, because using Portal will render the DOM element to another location in the page. Headless UI Float uses Headless UI's Portal component, which renders the element to the bottom of the <body>. The default tab-switching order is based on the DOM element order, so this phenomenon will appear after the Portal is enabled.

Here is a simple image to explain portaled DOM elements order:

螢幕擷取畫面 2023-09-02 154618

If you want to keep the tab order, it is recommended not to use Portal. If nested elements are hidden, you can check if the overflow-hidden class is added, deleting it will display it normally.

If you still need to use the Portal feature and keep the visual tab switching order, it is not within the scope of this package. It is recommended to search for react portal tabindex to find relevant solutions.

Merott commented 10 months ago

@ycs77 Thanks for the detailed response. I agree it seems outside the scope of this package.