[MENU]Issue in navigating to menu items using arrow keys when items are rendered in a menu section

[PreetiNagal]

Provide a general summary of the issue here

Render menu items inside section with selection mode set as single and try to navigate menu items using arrow keys. Issue appears when menu items are more than 12 and scrollbar is shown.

🤔 Expected Behavior?

menu items should be accessible using up down arrow keys

😯 Current Behavior

On using arrow keys, scroll bar is getting scrolled and hence user is not able to access the menu items

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

render a single selection menu with items more than 12ish and such that scroll bar is also shown Decrease browser height for scroll with 12ish items.

Version

latest

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Mac, windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[ktabors]

Reproduced this in a code sandbox using single selection. This works correctly with multiple selection. Needs additional investigation into why selection mode seems to case this. https://codesandbox.io/p/sandbox/menuitemwithactionbutton-forked-4m75tn?file=%2Fsrc%2FComponent.js%3A42%2C28

[sookmax]

@ktabors Hey I looked into this issue, and it seems it's specific to @react-spectrum's Menu, not react-aria-components's.

In particular, it seems there are too many 'scroll parents' for @react-spectrum's menu item (a div with the role 'menuitem') causing the following while loop in scrollIntoViewport() (which is called in an effect in useSelectableCollection()) to repeatedly call scrollIntoView(), which seems to interfere with the correct scroll positioning: https://github.com/adobe/react-spectrum/blob/ee51290b98fdc7cad31957ed2dd0a486eb0c1427/packages/%40react-aria/utils/src/scrollIntoView.ts#L104-L108

@react-spectrum Menu

https://github.com/adobe/react-spectrum/assets/71210554/32ba200a-8edd-4784-a6f6-75e5678fbeac

react-aria-components Menu

https://github.com/adobe/react-spectrum/assets/71210554/c8a377f4-1750-4277-ad5b-d465ac24bba1

---

I wanted to see what happens if I force the while loop to finish in a single iteration, so I edited the above while loop locally like so:

- while (targetElement && scrollParent && targetElement !== root && scrollParent !== root) {
+ while (targetElement.role?.includes('menuitem') && scrollParent && targetElement !== root && scrollParent !== root) {
      scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
      targetElement = scrollParent;
      scrollParent = getScrollParent(targetElement);
  }

And.. it seems to work properly now. (of course I'm not suggesting the above change as a possible fix. Just wanted to demonstrate that reducing scroll parents to one would solve the issue.)

https://github.com/adobe/react-spectrum/assets/71210554/94d1c6cc-defa-4007-b163-4da063f435a4

[ktabors]

Thanks for the analysis. I'll take a look at it soon and bring it to the team.

[LFDanLu]

We've been tracking this issue internally actually, but you are correct in your analysis @sookmax. Ideally scrollIntoViewport would scroll the target into view within its nearest scrollable parent, then for each parent within a scrollable parent we'd need to scroll them in such a way that the target is still in view, repeating until we hit the document root/top most scrollable parent. This will take some calculation to determine the target's relative position in each scrollable parent's scroll region.

[PreetiNagal]

what's the status of this issue fixation?

[LFDanLu]

No updates as of now, the team hasn't had the bandwidth to pick this up unfortunately.

[PreetiNagal]

we need to migrate our component having this use case to RSPV3 asap. Please help in prioritising this issue fixation.

[snowystinger]

The fastest way to get this prioritized is to submit a PR for it. There is a suggestion for a fix above.