Reach-ui: Can't pass `onKeyDown` handler to `MenuItem` + other strange handler behaviour

[mrseanbaines]

🐛 Bug report

Current Behavior

When passing an onKeyDown handler to the MenuItem component, it doesn't appear to be calling the function at all.

It seems to be possible to pass onKeyDown (and prevent default) to the MenuList component, but this then applies to ALL MenuItem elements, which isn't necessarily desired.

Passing onMouseUp to MenuList also appears to be called, but here it's not possible to prevent default behaviour.

Expected behavior

The onKeyDown function passed to MenuItem should be called and it should be possible to prevent default behaviour.

It seems like this should be possible, since in the documentation here it mentions intercepting and preventing default behaviour, and says:

MenuItem: Selects itself in onMouseUp or onKeyDown (Enter or Spacebar keys)

Reproducible example

https://codesandbox.io/s/hidden-brook-d9qjz?file=/src/App.js

Suggested solution(s)

Allow onKeyDown to be passed (and called) in each MenuItem, and to be able to preventDefault to prevent closing the menu.

Additional context

I want to use this component for a multi-level dropdown so I need to be able to prevent the menu closing upon selecting an item, and rather show the next level of items.

Your environment

| Software | Name(s) | Version |
| ---------------- | ------------------ | ------- |
| Reach Package | @reach/menu-button | 0.11.2 |
| React | - | 17.0.0 |
| Browser | Firefox | 82.0.2 |
| Assistive tech | - | - |
| Node | - | 12.17.0 |
| npm/yarn | Yarn | 1.22.5 |
| Operating System | macOS Catalina | 10.15.7 |

[chaance]

onKeyDown on menu items won't work because the list has focus when the menu is open, not the item, so this isn't a bug but the desired behavior (preventing selection) also isn't clearly available. I'll try to work on it this weekend and see how we can't fix it.

[mrseanbaines]

Oh yeah, makes sense.

Thanks! Looking forward to hopefully being able to use this.