I am working on a popover component that appears below a textfield component. The goal is to trigger a menu when the user types a specific key, like :, into the textfield. The user can then select an option from this menu to autocomplete the textfield.
A great example of this feature in action is GitHub's Hidden text expander feature.
I have implemented two versions. By default, one version creates a focus trap on the menu when opened, restricting the user from freely typing in the textedit component. This menu also responds to keyboard controls such as ESC, ENTER, TAB, and closes on blur.
To allow the user to keep typing in the textfield even when the menu is open, I have disabled autofocus on the popover menu component using some of the provided functionalities from mui.
How can I achieve functionality similar to GitHub's feature where the component maintains accessibility while allowing the user to type freely in the textfield?
Below is the code snippet for the implementation that disables the focus feature on the popover menu.
return (
<>
<div className="card">
<TextField
fullWidth
inputRef={inputRef}
value={text}
id="filled-basic"
label="Filled"
variant="filled"
onChange={(e) => handleChange(e)}
/>
<Menu
id="demo-positioned-menu"
aria-labelledby="demo-positioned-button"
open={activeToken?.word === "#"}
onClose={handleClick}
anchorReference="anchorPosition"
autoFocus={false}
disableAutoFocus={true}
disableEnforceFocus={true}
anchorPosition={{
top: t + 20,
left: l
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<MenuItem onClick={() => handleClose('JavaScript')}>#JavaScript</MenuItem>
<MenuItem onClick={() => handleClose('Clojure')}>#Clojure</MenuItem>
<MenuItem onClick={() => handleClose('Python')}>#Python</MenuItem>
</Menu>
</div>
</>
)