MenuItem types should allow onFocus

[stefanprobst]

Provide a general summary of the issue here

following this comment i want to call prefetch when a menu item receives focus:

<MenuItem
  href="/"
  onHoverStart={() => router.prefetch("...")}
  onFocus={() => router.prefetch("...")}
/>

the onFocus handler is internally passed correctly to useMenuItem, but the types are complaining that onFocus is not allowed on MenuItem

🤔 Expected Behavior?

MenuItem types should allow onFocus

https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Menu.tsx#L335
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/menu/src/useMenuItem.ts#L121

😯 Current Behavior

see above

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

n/a

Version

1.5.0

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue. I think this is something we should consider. As you've pointed out, there are two cases where this should be hooked in, focus and hover.

I'd like to come up with an API that combines them and gets away from the dom events.
Possibly onPreSelection or something added to the router options. Will discuss more with the team.

[devongovett]

There are also cases where neither onHover or onFocus will fire, for example if virtual focus is used (e.g. combobox, upcoming searchable menus). In those cases DOM focus stays on the input during keyboard navigation, so a separate event might be useful then too. Not to say that we shouldn't also expose onFocus though.