Event Handler not reaching Link component

[TylerAPfledderer]

Hello!

Please see this minimal repo using the Link component, as well as the Link component and Menu components from Chakra UI.

I am contributing to a project that is using these packages and updating their main navigation to use the Menu components. Per Chakra usage, MenuItem normally renders a button, but can be a link. With a11y, you navigate the menu items via the arrow keys and not Tab.

In the project, ChakraLink is consuming the Link of this i18next package for the theming, then this custom component is consumed by MenuItem

The current issue is that this approach prevents the execution of onKeyDown event happening under the hood from the Chakra package. This event is being passed via MenuLink to MenuItem.

Could the innerRef being used by i18next Link be preventing this handler?

With the minimal repo, do the following:

1. Click "Open Menu" so the two list items appear
2. Press the down arrow key, and notice no default focus styles.
3. In the component file, replace BaseLink with "a" for both MenuItems's then repeat the process to see the default focus styles on press of the down arrow key.

For references:

• The custom onKeyDown event in useMenuList.
• The MenuList component where useMenuList is called as listProps and spread to MenuTransition which is a motion component.
• Chakra Link docs
• Chakra Menu docs

[pettinarip]

Good catch @TylerAPfledderer!

I've forked the shared example, tested it by using the native Gatsby Link and it fails as well. So, seems to me that this is a problem with the Gatsby Link itself and/or the reach router link.

As far as I could see, Gatsby is use the innerRef prop but in the Reach Router docs it says that innerRef should only be used with react < v16.4 (while gatsby-link has react 18 as peer dep).

Not sure if that could be the source of the problem here.