[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

[mogrady88]

Hey @mj12albert that doesnt work either unfortunately. I wasnt sure if this was due to any onKeyDown logic. I almost need a way to mimic whatever happens when you force the open prop to true

[mogrady88]

For reference there is this codesandbox that's got a similar setup to mine. Pressing Tab closes the menu instead of navigating to the button

[DiegoAndai]

Hey @mogrady88, thanks for the report!

Sadly, this is not supported at the moment, similar to the Select component #26356.

I added the waiting for 👍🏼 label so the community can vote for this new feature. If you want to see this implemented, please add a 👍🏼 reaction to the issue's description.

In the meantime, if you or anyone is trying to find a workaround, I would recommend looking at Autocomplete's implementation, mimicking the Popper and its children's structure, and using slots.popper to replace it. Similarly to what you've tried in https://codesandbox.io/p/sandbox/compassionate-butterfly-f4rn8z?file=%2Fdemo.tsx%3A46%2C26.

[mogrady88]

Ok, thank you Diego! Ill take a look the workaround in the meantime