Estoy desarrollando un menú desplegable usando Select from rebass . Cuando estoy usando el teclado para navegar por la página, cuando llego al menú desplegable y presiono la barra espaciadora o intro, me gustaría que se abra el menú desplegable. Agregué un contenedor Box alrededor del menú desplegable y un evento onKeyDown que llevará directamente el elemento html a través de la referencia y al presionar Intro o espacio se abrirá el menú desplegable. Así es como se ve:

 <Box onKeyDown={e => { if ((e.Key == "Enter" || e.keyCode == 32) && selectRef =! null && selectRef.current != null) { selectRef.current.focus() } }}> <Select ref={selectRef}> .... </Select> </Box>

Cuando estoy navegando por la página con Tabulador, cuando el foco está en el menú desplegable, si presiono Intro, se abre el menú desplegable; funciona como se supone que debe hacerlo, pero si presiono la barra espaciadora, el foco del menú desplegable se pierde y el menú desplegable no está abierto. Si presiono dos veces el espacio, se abre el menú desplegable. ¿Puede alguien ayudarme con esto? ¿Por qué se pierde el foco cuando presiono una vez en la barra espaciadora? ¿Hay otra forma de hacer esto (abrir el menú desplegable con una pulsación de espacio)?