I am currently utilizing the MUI Select component in order to create a dropdown list. My goal is to:
- use the mouse to select an item
- utilize the up/down key for navigation and selection
However, I specifically aim to disable selecting an item by typing its initial character.
For example, if my list contains:
Apple
Apricot
Banana
Mango
Mangosteen
Pressing the letter A should not select Apple. When pressing A again, it should not select Apricot. I seek to disable this behavior and only allow selection through scrolling or keyboard navigation. How can this be achieved? Thank you.
Additional information: Within the children of the Select element, there is a search box located at the top of the menu list. The requirement states that this search box should filter the menu items. While typing in the search box, when the typed character does not match the starting character of any label in the menu items, filtering works correctly. However, if a character matching the beginning of a menu item's label is entered, the selection jumps to the list instead of continuing the filtering. Is there a way to prevent keypresses within the search box from triggering the selection of menu items?
https://i.stack.imgur.com/J0AHP.png
I am aware that AutoComplete allows for typing in search functionality, but the requirement mandates the inclusion of a search box. How can this search box be implemented? Thank you and thanks once more.