Open hadson172 opened 1 year ago
I have also meet this issue!
@hadson172 @NguyenTrung1995 The tab traversal issue must be caused by radix-ui
. react-select
does nothing on Tab as long as the menu isn't open. With e.g. react-focus-trap
I could not replicate the issue.
Workaround that works for my use case until this gets fixed in radix-ui
:
const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
const element = event.relatedTarget;
if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) {
(element as HTMLElement).focus();
}
};
Workaround that works for my use case until this gets fixed in
radix-ui
:const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => { const element = event.relatedTarget; if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) { (element as HTMLElement).focus(); } };
Alhamdulillah, this works like magic brother 😃just add this on react-select onBlur
prop btw
@philsp Thanks for the workaround. Is there a ticket created for radix-ui
that I can follow?
This workaround works great for the TAB problem! is there a workaround for the ESC problem mentioned on the original issue?
Workaround that works for my use case until this gets fixed in
radix-ui
:const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => { const element = event.relatedTarget; if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) { (element as HTMLElement).focus(); } };
Amazing Sir! I had to login to say thank you so much
Workaround that works for my use case until this gets fixed in
radix-ui
:const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => { const element = event.relatedTarget; if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) { (element as HTMLElement).focus(); } };
Have the same issue too. This approach is good but I still face the other problem when the next focus element is not a standard input element (in my case is "RadioGroup"). so I made some modify to following:
const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
const element = event.relatedTarget as HTMLElement
if (element?.getAttribute('role') === 'dialog') return
element?.focus()
}
I hope this can help someone have the same issue with me. and hope someday this issue can be fixed too.
In short, when I place react-select inside radix-ui dialog/popover and when focus is on react-select I am not able to close dialog using ESC. Additionaly "tab" traversal is not working properly. Pressing tab does not traverse between two selects Here is a source code: https://codesandbox.io/s/trusting-dewdney-485wkd?file=%2Fsrc%2FApp.tsx