TagGroup from @adobe/[email protected] sometimes renders more tags than can fit within the specified maxRows, so the rest gets cut off

[d3n13]

Provide a general summary of the issue here

TagGroup from @adobe/[email protected] sometimes renders more tags than can fit within the specified maxRows, so the rest is cut

🤔 Expected Behavior?

I expect it to render as much tags as would fit in specified amount of maxRows (Show more/less toggle included).

😯 Current Behavior

TagGroup from @adobe/[email protected] sometimes renders more tags than can fit within the specified maxRows, so the rest is cut

💁 Possible Solution

Fix the logic that calculates amount of tags to be rendered

🔦 Context

One additional thing I'd like to highlight is that this issue is reproducible quite consistently on pages using many TagGroup components. At least one of them often happens to be in this buggy state

🖥️ Steps to Reproduce

1. Navigate to codesandbox TagGroup bug
2. Resize the screen such that the tags and/or toggle action is cut, like so:

Screen.Recording.2024-12-03.at.16.08.08.mov

Version

@adobe/[email protected]

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Firefox, Safari

What operating system are you using?

MacOS

🧢 Your Company/Team

Adobe/Workfront

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the reproduction! Looks like the show all button isn't measured at all to check if it's on the next line or not. This can only occur when the tags are longer than the show all button. I'm able to reproduce it in our storybook as well.

I think our best option is to render two absolutely positioned invisible copies of the buttons (both the show all/hide and the custom action), and include those measurements.

Other options:
We could go back to two pass system to do the measurement. I think we had this previously, could reference blame to get back to that.
Or we could model the rendering like how we do for S2, which always renders the full list of tags and buttons invisibly in the background expressly for measurement purposes.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/TagGroup.tsx#L167