Add keyboard selection

[laliq]

Resolves #1910

[oddvernes]

Currently the keypress only handles onclose, which only closes the menu without selecting anything. But it is onClick we need. This is what is used to call different functions. The problem is onClick expects a mouseevent . We need enter and click to behave exactly the same.
My suggestion was to just dispatch a click event when you press enter, which does seem to work perfectly
if (key === 'Enter') { e.target.dispatchEvent(new Event('click', { bubbles: true })) }
But maybe @mimarz have some some reservations?:P

Also in menu stories something is trapping focus on the anchor button while tabbing, but this seems to be an existing bug, having to do with event.preventDefaut/stopPropagation in the stories maybe

[mimarz]

We need to make sure the expected behaviour is the same for when either click or keypress is used. That being that the onClose handler passed to Menu is called with the event.

Introducing an onClose on MenuItem in addition to the on one Menu would cause confusion as on or the other would be called be it click or keypress.

[mimarz]

Currently the keypress only handles onclose, which only closes the menu without selecting anything. But it is onClick we need. This is what is used to call different functions. The problem is onClick expects a mouseevent . We need enter and click to behave exactly the same. My suggestion was to just dispatch a click event when you press enter, which does seem to work perfectly if (key === 'Enter') { e.target.dispatchEvent(new Event('click', { bubbles: true })) } But maybe @mimarz have some some reservations?:P

Also in menu stories something is trapping focus on the anchor button while tabbing, but this seems to be an existing bug, having to do with event.preventDefaut/stopPropagation in the stories maybe

Not sure, mimicing a click event when a key is pressed feels very wrong :P Typing should not be a problem as we can just use "or" on the event type?

[oddvernes]

Not sure, mimicing a click event when a key is pressed feels very wrong :P Typing should not be a problem as we can just use "or" on the event type?

onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void

if (key === 'Enter') { if (onClick) { onClick(e) }

Yes this works if you also declare the event as mouse or keyboard downstream in the stories (I don't know how many people even use this event in their apps, so its only a small breaking change for those that do)

[mimarz]

I was thinking more for the onClose handler? Lets not mess expected native behaviours on handler 😅

[laliq]

Thanks guys 🙏

[laliq]

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

[oddvernes]

LGTM 👍
I'll make a new issue for focus getting stuck on the anchor button in menu stories

[mimarz]

Quirky solution! LGTM 👍