[Select] Keyboard navigation does not work if the first child is a ListSubheader

[stephen-mclean]

• 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 😯

Following the example here I tried to add grouping to my select component. When trying to navigate the example in the documentation with your keyboard it works as expected, similar to how the navigation works without grouping, where I tab to give the select focus, and then use the arrow keys to navigate between the different options with the group headings being skipped.

However, in my use case, the group ListSubheader is the first child of the Select, rather than a selectable option. In this case when I tab to focus the select and then try to navigate with the arrow key I am not able to navigate to the options. It is worth noting though that if I tab again, the group heading receives focus and then I can use the arrow keys to navigate the options. However, the group heading should not be focusable as it's not a selectable option.

Expected Behavior 🤔

I should be able to have a group ListSubheader as the first child of the Select, and still be able to give the component tab focus and navigate the selectable options using the arrow keys

Steps to Reproduce 🕹

Codesandbox example
The example contains two Select components. One similar to the documentation example which works as expected, and one where the group heading is the first child, which does not work as expected

Steps:

1. Give focus to the Working select example
2. Press the down arrow key and the menu opens
3. You can navigate down through the menu items by pressing the down arrow key
4. Give focus to the Not Working select example.
5. Press the down arrow key and the menu opens
6. You can keep pressing the down arrow key but you can't navigate to the items.
7. Press tab and the group heading will be given focus.

Context 🔦

I am trying to use the Select to provide a grouped list of options that is also keyboard accessible, where the child elements of the select are Listsubheader and MenuItem.

Your Environment 🌎

`npx @material-ui/envinfo`

  Tested on Chrome


System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 496.72 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Managers:
    Homebrew: 3.1.6 - /usr/local/bin/brew
    pip3: 19.2.3 - /usr/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 10.15. - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 12.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.5 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.57.0 - /usr/local/bin/code
    Vim: 8.1 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.16 - /usr/local/go/bin/go
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.3.11 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.8.2 - /usr/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 91.0.4472.106
    Safari: 14.1.1

[DouglasPds]

Hi, I trying to solve this.

[DouglasPds]

When the first element in the select is the ListSubheader it receives the autoFocus but it is not a valid option he does not start selected like a MenuItem when we open the list of items, and he receives the tabIndex = 0, and using the tab we now can use the arrow.

Using the native optgroup as the first child the first option starts selected, and Select ignores the optgroup label.

In the code of SelectInput when the const items are created it receives the same properties in cloneElement for MenuItems and ListSubheader. code of const items

Using the child.props.value === undefined is possible to find the ListSubheader items and return a different object in cloneElement (or none) solving the problem with the click.

But I still not resolve the autoFocus that starts in the first element of the list items in the select, working on this.

[mnajdova]

Fixed by #27299