Estoy usando el componente Dropdown de Semantic UI React y tratando de reconciliar la entrada del teclado y el mouse en una sola línea seleccionada que se usa para navegar por las opciones.

El comportamiento actual:

• Hay dos selecciones en el menú desplegable: una para el mouse y otra para el teclado.
• Puedo usar el teclado para mover la selección del teclado hacia arriba y hacia abajo.
• Si paso el mouse sobre un elemento, la selección del mouse se mueve a ese elemento y la selección del teclado permanece donde está.
• Si uso el teclado para mover la selección del teclado hacia arriba y hacia abajo, entonces 1) el mouse desaparece 2) la selección del teclado permanece donde está.

El comportamiento que me gustaría:

• Solo hay una selección en el menú desplegable.
• Puedo usar el teclado para mover la selección hacia arriba y hacia abajo.
• Si paso el mouse sobre un elemento, la selección se mueve a ese elemento.
• Si uso el teclado para mover la selección hacia arriba y hacia abajo, 1) el mouse desaparece 2) la selección se mueve hacia arriba o hacia abajo.

Entonces, mi pregunta:

• ¿Cómo hago para que haya una sola selección en el menú desplegable y el mouse y el teclado la controlen? Tampoco quiero activar un onChange() , ya que esto no lo estoy seleccionando completamente con el mouse hover / up / down, solo cambiando el enfoque.

Puede usar cualquier ejemplo de la página de documentación de Dropdown para probar el código en: https://react.semantic-ui.com/modules/dropdown/

Aquí hay un video de ejemplo de https://replit.com/ que muestra mi comportamiento deseado: https://imgur.com/a/C6w77kO