[Autocomplete] Keyboard arrow key option selection broken with custom PopperComponent and renderInput

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

• Simplified Sandbox example
• On MUI Docs

Steps:

1. Click on autocomplete component.
2. Focus should now be on the input field.
3. Press arrow key down until highlighting the last option at bottom of the list.
4. Press arrow key down once more.
5. Top options are not visible and are hidden behind the input field.

Current behavior 😯

When having an autocomplete with a custom renderInput andPopperComponent as highlighted in autocomplete docs, keyboard navigation is not working as expected. When the option selection wraps from the last to the first element using arrow keys, the option is hidden under the input field.

Expected behavior 🤔

When the first option is selected after being navigated via the keyboard from the last option, the options list should look like the state when first rendered/opened. (option should be visible)

Context 🔦

I am trying to tackle a few usability tickets and was able to track the source of this bug to MUI. Since our implementation is mutated from the autocomplete examples provided I am assuming this is an undesired/uncaught bug, since it impacts usability and user experience.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.

- Tested on Google Chrome, on OSX with most recent updates for both.

  Output from `npx @mui/envinfo` goes here.

- Tested / recreated on sandbox linked above, don't know how to run npx commands on there 🤷 

[sai6855]

sure, i don’t mind

[michaldudak]

@RyanBarclay sure, I don’t mind. Alternatively you could send a PR to @sai6855’s branch or contribute directly to his PR (after you get permissions).