[Autocomplete] Custom Popper with "Action Option" keyboard support

[mogrady88]

Hey,

I'm trying to implement an Autocomplete with a custom Popper and an "action Item" at the top of the list. The "action item" is a ListItemButton. This renders just fine, which is great, but I'm running into issues trying to add keyboard support to this implementation. The user should be able to Tab to the "action item" in order to interact with it but when I press Tab the Autocomplete closes.

I have not found any way to keep the menu open when I press the Tab key. Do you have any ideas on how I could achieve this?

Implementation:

Popper Code:

onKeyDown Handler Code (handleBaseKeyDown is mapped to the onKeyDown prop on Autocomplete):

Search keywords:

[mj12albert]

onKeyDown Handler Code (handleBaseKeyDown is mapped to the onKeyDown prop on Autocomplete)

@mogrady88 Instead of preventDefault(), does this work:

event.defaultMuiPrevented = true;

Reference: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/useAutocomplete/useAutocomplete.js#L760-L767