Open alexis-lanoix-sixthfin opened 6 months ago
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
@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?
@mitrank thanks for having a look, were you using the storybook with the 'scrolling' turned on? or only without? that might help in reproducing.
@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.
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
.
The same for breadcrumbs:
https://github.com/user-attachments/assets/85b64a0d-f567-4480-a792-c1cb4c63b767
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
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