adobe / adobe/react-spectrum

TagGroup from @adobe/react-spectrum@3.37.1 sometimes renders more tags than can fit within the specified maxRows, so the rest gets cut off

Open
#7,467 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

TagGroup from @adobe/react-spectrum@3.37.1 sometimes renders more tags than can fit within the specified maxRows, so the rest is cut
![Screenshot 2024-12-03 at 11 50 32](https://github.com/user-attachments/assets/51534fa8-0a3e-45b8-8081-e9d7f94594d2)

### 🤔 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/react-spectrum@3.37.1 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](https://codesandbox.io/p/sandbox/elastic-mahavira-3kdq2h?file=%2Fsrc%2FApp.js)
2. Resize the screen such that the tags and/or toggle action is cut, like so:

https://github.com/user-attachments/assets/a7f4b8a3-8339-4f37-a954-19d6d00fa855

### Version

@adobe/react-spectrum@3.37.1

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.