Tabindex not working - Githubissues

JedWatson / react-select

The Select Component for React.js

https://react-select.com/

MIT License

27.56k stars 4.12k forks source link

Tabindex not working #5931

Closed imtaxu closed 2 months ago

imtaxu commented 3 months ago

Hi there,

When using react-select components with react-hook-form inside a Radix UI Sheet or Modal, the tabindex does not work.

Would you please see CodeSandbox Demo

The expected behavior is that after selecting a color, pressing the tab key should move the focus to the size input, but instead, it selects the sheet component. The tab key does not move the focus to the size input or button at all.

ches4117 commented 2 months ago

According to https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-focusing-steps, we should not set tabindex in dialog element

I found that Radix UI Sheet using tabindex={-1}, if we delete this, we can correctly use tab key.

imtaxu commented 2 months ago

Using it this way works, thanks.

<SheetContent tabIndex={false}>