He creado este menú desplegable personalizado desde cero, está inspirado un poco en React Select y es muy similar a lo que tengo que crear en el trabajo. Estoy contento con él, pero tengo algunos problemas de bloqueo.

En primer lugar, estoy tratando de hacer que el menú desplegable sea "buscable". Básicamente, el usuario puede escribir algo para reducir la lista de opciones que se pueden seleccionar. Para esto, implementé un <input type="text /> que recibe el foco cuando el menú está abierto. Supongo que está algo bien, pero la entrada debe ajustarse al ancho del contenido que tiene, por lo que actualmente se ve mal Supongo que esto se puede hacer con CSS.

Ahora, el siguiente problema está relacionado con el primer punto anterior. Estoy tratando de implementar una navegación con teclado, básicamente moverme entre las opciones con la flecha hacia arriba/abajo y poder seleccionar una opción con Enter. Dado que la entrada recibe el foco en este caso, no sé cómo implementar esta navegación con el teclado, ya que entraría en conflicto.

Si no enfoco la entrada, entonces no podemos escribir. Así que no estoy seguro de qué hacer en este caso.

Aquí está el menú desplegable .

Aquí hay un ejemplo de lo que quiero lograr. https://jquense.github.io/react-widgets/docs/Multiselect#overview

Como puede ver aquí, al abrir el menú, la entrada sigue enfocada, pero también podemos navegar con flechas a través de las opciones del menú.