Search input as option in Material UI Select component

Question

I need to make Select component with Search input as first option in dropdown list. Something like this:

The main problem is that Search component acts as normal from input. I don't know how to make it focusable. Thank you.

Answer 1

Problem Explanation

This happens because MenuItem is a direct child of the Select component. It acts in the same way as described in Selected menu documentation. You can see that when Menu (or in our case Select) is opened, focus is automatically put onto the selected MenuItem. That's why TextField loses focus in the first place (even if we attach an autoFocus attribute to it).

Ok, so we can obviously simply hack this using the useRef hook on a TextField and then call the focus() method when Select opens. Something like this:

var inputRef = useRef(undefined);
...
<Select onAnimationEnd={() -> inputRef.current.focus()} ... >
    ...
    <TextField ref={inputRef} ... />
    ...
</Select>

Well not so fast, there's a catch!

Here's where things break: You open your select and focus shifts to the input field as expected. Then you insert search text that would filter out the currently selected value. Now if you remove text with backspace until the currently selected item appears again, you would see that focus would automatically be placed from input field to the currently selected option. It might seem like a viable solution at first but you can see where UX suffers and we don't get expected stable behavior that we want.

Solution

I find your question a bit vague without any code and proper explanation, but I still find it useful since I was searching for the exact same solution as you: Searchable Select MUI Component with good UX. So please note that this is my assumption of what you wanted as a working solution.

Here's a CodeSandbox with my working solution. All the important bits are explained in code comments and here:

• The most important change is adding MenuProps={{ autoFocus: false }} attribute to the Select component and autoFocus attribute to the TextField component.
• I've put the search TextField into a ListSubheader so that it doesn't act as a selectable item in the menu. i.e. we can click the search input without triggering any selection.
• I've added a custom renderValue function. This prevents rendering empty string in Select's value field if search text would exclude the currently selected option.
• I've disabled event propagation on TextField with the onKeyDown function. This prevents auto selecting item while typing (which is default Select behavior)
• [BONUS] You can easily extend this component with multi selection support, which was what I ended up making for my project, but I'll not include the details here since it's out of the scope of your question.