[Select] Keyboard navigation breaks when first child is ListSubheader

[petermikitsh]

When the first child of a Select component is ListSubheader, you must press tab before up/down arrow key functionality works.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

tab key press is necessary.

Expected Behavior 🤔

tab keypress should not be necessary.

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/loving-knuth-e5ovy?file=/src/index.js
2. Click in the preview area
3. Press tab
4. Press return
5. Observe that up/down arrow keys have no effect
6. Press tab
7. Observe up/down arrow keys now work

Fix criteria: Step 6 is no longer necessary.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.9
React	v16.13.1
Browser	Chrome
TypeScript
etc.

[eps1lon]

A ListSubheader doesn't make much sense here. You'd need an abstraction that tells the Select that the iption is disabled. Direct children of Select need to be options.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

@petermikitsh Please see #18200. I understand you are coming from our select group demo, we need to work on it.

[petermikitsh]

@oliviertassinari How should I implement this, in a way where the select input with headers is accessibility-friendly?

[oliviertassinari]

I have no idea, did you look into the problem?

[petermikitsh]

@oliviertassinari using option and optgroup while setting native={true} on the Select works for accessibility. That's the first example here: https://material-ui.com/components/selects/#grouping

I made another example to demo keyboard navigation works properly when using native with the first element being an optgroup (the native equivalent of a ListSubheader): https://codesandbox.io/s/exciting-water-ki7eu?file=/src/index.js