I am developing dropdown using Select from rebass. When I am using the keyboard to navigate through page, when I come to the dropdown, and I press space bar or enter, I would like the dropdown to open. I've added a Box container around the dropdown and an onKeyDown event which will directly take the html element through ref and on press of enter or space will open the dropdown. This is how it looks:

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

When I am navigating through the page with Tab, when the focus is on the dropdown if I press enter the dropdown opens - it works like it suppose to, but if I press space instead, the focus of the dropdown is lost, and the dropdown is not opened. If I press two times on space the dropdown opens. Can someone help me with this? Why the focus is lost when I press once on spacebar? Is there another way to do this (open the dropdown with one press of space)?