ActionGroup menu not showing on click when zoomed

[alexis-lanoix-sixthfin]

Provide a general summary of the issue here

When using the React Spectrum ActionGroup component with overflowMode="collapse" and a set width, the menu doesn't always appear on click when zoomed in or out (when the group is collapsed).

🤔 Expected Behavior?

When collapsed, an ActionGroup's menu should always appear when clicked, regardless of the page zoom.

😯 Current Behavior

When collapsed and the page is zoomed in, the ActionGroup's menu appears to open when clicked and then immediately close (as the page scrollbar disappears for a short time and then immediately reappears).

Note that I could not reproduce this behavior with the ActionMenu component.

https://github.com/adobe/react-spectrum/assets/144046492/f5fbe535-ad79-49d2-9317-a46f0413a2db

💁 Possible Solution

No response

🔦 Context

In my project, we are using an ActionGroup with overflowMode="collapse" and a set max width with a few action items, which always results in a single button being visible and the rest being collapsed under the menu.

At any page zoom value other than the default 100%, the menu doesn't appear when clicked.

🖥️ Steps to Reproduce

From the "Collapsing button labels" or the "Vertical collapsing behavior" of the ActionGroup documentation: https://react-spectrum.adobe.com/react-spectrum/ActionGroup.html#collapsing-button-labels

• zoom in the page to:
  • >= 150% with chrome
  • >= 130% with firefox
  • >= 175% with edge
• try to open the menu by clicking the "..." button

Unfortunately, I could not reproduce this behavior from a CodeSandBox.

Version

3.32.2

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 10

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Did some digging, looks like https://github.com/adobe/react-spectrum/blob/1697a7fef3516f7a194f43b75edb858589ef6535/packages/%40react-spectrum/actiongroup/src/ActionGroup.tsx#L179 is to blame here. There is a resize that occurs due to scrolling being disabled when the menu is opened since the outer most scrollbar disappears, causing the ActionGroup to remeasure itself to see if it should render more/less buttons. When it does this, it temporarily renders all the buttons which gets rid of the menu button it seems, unmounting the opened menu. Perhaps we should pause this resizing behavior when the menu is opened

[mitrank]

@LFDanLu well surprisingly in the storybook, it isn't showing any issue. No matter how much we zoom, it works perfectly. Maybe the issue could be in the react-spectrum's docs css for that section?

[snowystinger]

@mitrank thanks for having a look, were you using the storybook with the 'scrolling' turned on? or only without? that might help in reproducing.

[mitrank]

@snowystinger hey, I checked into the scrolling part you mentioned. Its working for both when the scrolling is ticked or unticked, it dosent matter. It works perfectly in the storybook.

[korkota]

I see the bug in Windows 11 and Chrome without OS or browser zooming. It looks like changing padding-right below https://github.com/adobe/react-spectrum/blob/cfd890edf73783cbea0b94316d69f4bdced5ed8a/packages/%40react-aria/overlays/src/usePreventScroll.ts#L73 triggers ActionGroup rebuilding here https://github.com/adobe/react-spectrum/blob/1697a7fef3516f7a194f43b75edb858589ef6535/packages/%40react-spectrum/actiongroup/src/ActionGroup.tsx#L76 and doesn't allow to open the menu.

https://github.com/user-attachments/assets/791d22cc-2129-49de-a25f-dfb2765ed527

I can reproduce the bug when padding-right <= 17px and can't when padding-right >= 21px.

[korkota]

The same for breadcrumbs:

https://github.com/user-attachments/assets/85b64a0d-f567-4480-a792-c1cb4c63b767