You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With tabSelectsValue set to false, I would like the user to be able to use the Tab key to move focus to a button inside my Select Menu's footer. At this point, I'd be happy with being able to use the Arrow down key to access the Menu footer.
I understand how to easily create a footer at the bottom of the menu by using a custom component for MenuList (or Menu).
But I have tried for hours (probably days) to make my menu footer keyboard accessible.
This sandbox contains a very basic example with tabIndex set to 1 on my menu footer.
I have tried to use the onKeyDown method on Select to capture Tab key presses and force focus on the footer component via a ref. However, it seems Select always blurs when the footer component is focused. The only time I have been able to get close to the behavior I'm searching for, I have to set menuIsOpen to true permanently, which is obviously not a tenable solution.
Thank you in advance to anyone who is able to help.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
With
tabSelectsValue
set tofalse
, I would like the user to be able to use the Tab key to move focus to a button inside my Select Menu's footer. At this point, I'd be happy with being able to use the Arrow down key to access the Menu footer.I understand how to easily create a footer at the bottom of the menu by using a custom component for MenuList (or Menu).
But I have tried for hours (probably days) to make my menu footer keyboard accessible.
See this codesandbox: https://codesandbox.io/s/react-select-footer-not-accessible-myv9tz?file=/example.js
This sandbox contains a very basic example with
tabIndex
set to 1 on my menu footer.I have tried to use the
onKeyDown
method onSelect
to capture Tab key presses and force focus on the footer component via aref
. However, it seems Select always blurs when the footer component is focused. The only time I have been able to get close to the behavior I'm searching for, I have to setmenuIsOpen
to true permanently, which is obviously not a tenable solution.Thank you in advance to anyone who is able to help.
Beta Was this translation helpful? Give feedback.
All reactions