I have created this custom Dropdown from scratch, it's inspired a bit by React Select and very similar to what I have to create at work. I'm happy with it, but I have a few blocking issues.

First of all, I'm trying to make the Dropdown "searchable". Basically the user can type something, to narrow down the list of options that can be selected. For this, I have implemented an <input type="text /> that receives focus when the menu is open. It's somewhat fine I guess, but the input must be wrapping around the width of the content it has, so currently it looks off. I guess this can be done with CSS.

Now, the next problem is related to the first point above. I'm trying to implement a keyboard navigation, basically move between the options with arrow up/down and be able to select an option with Enter. Since the input receives focus in this case, I don't know how to implement this keyboard navigation since it would conflict.

If I don't focus the input, then we can't type. So I am not sure what to do in this case.

Here's the Dropdown.

Here's an example of what I want to achieve. https://jquense.github.io/react-widgets/docs/Multiselect#overview

As you can see here, when opening the menu, the input is still focused, but we can also navigate with arrows through the menu options.