reactjs - Give GroupHeader keyboard focus react-select

Question

I have been trying to change how groups are displayed in my react-select implementation so that I can sub-menus display within the dropdown like this:

Ideally when you either click or enter or spacebar on the keyboard on the main menu item (like by quarter in the screenshot above) the sub-menu showing other menu items opens to the side.

To get this functionality using react-select I was trying to replace the GroupHeader component so that when I click or activate it with my keyboard it would show the sub-menu items.

Sandbox: https://codesandbox.io/s/react-select-example-12eq7?file=/src/App.js

However when I use my keyboard to navigate through the options in the dropdown it skips over the GroupHeader, I have looked through the documentation but I am having trouble finding if or how I can make this focusable. I wanted to see if anyone had run into this before or perhaps had another suggestion on how to approach this problem.

question from:https://stackoverflow.com/questions/65852295/give-groupheader-keyboard-focus-react-select

Answer 1

Waitting for answers