Wrong keyboard arrow opens Submenu in vertical-right mode

[maazadeeb]

Firstly, thank you for the awesome library! I love using it.

Problem

My app supports RTL, and I use vertical-right mode on the Menu component and alter the CSS in order to get the arrow on a SubMenu on the left. I also support keyboard navigation. It is generally intuitive to press the arrow direction that is shown on a submenu item to open the corresponding submenu.

Expected Behaviour

I expect the left arrow to open the submenu and right arrow to close it when in vertical-right mode.

Reproducible example

I've created a sample codesandbox here to emulate how the Menu looks in RTL in my app. Notice that you need to use right arrow key to open and left arrow key to close, and it's actually confusing.

Proposed solution

I've gone through the code and I think the fix is as easy as swapping these two if conditions in vertical-right mode

https://github.com/react-component/menu/blob/fe3a4755b33d617689ff052dc8981296e75df4d8/src/SubMenu.jsx#L152

https://github.com/react-component/menu/blob/fe3a4755b33d617689ff052dc8981296e75df4d8/src/SubMenu.jsx#L162

If you think this is valid, I'll propose a PR with tests. Also, I've found many more issues with keyboard support. If you're willing, I'd like to report and fix them with your help. Thanks!

[picodoth]

@afc163 / @yesmeck can you help validate this usage scenario?