react-spectrum
react-spectrum copied to clipboard
adobe
Heavy line under selected tab doesn't update when tab label is changing
🐛 Bug Report
If you change the label of tab, the heavy line underneath the selected tab doesn't update in position or width to accommodate the new label.
🤔 Expected Behavior
The heavy line under the selected tab would always be the same width of selected tab and always the correct position.
😯 Current Behavior
The width and position of the heavy line doesn't change.
💁 Possible Solution
🔦 Context
We have tabs whose labels can dynamically change.
💻 Code Sample
https://codesandbox.io/s/tabs-with-changing-label-w41cc?file=/src/App.js Change the value in the text field. Notice the width of the heavy line doesn't change. Select the Empire tab. Change the value in the text field some more. Notice the position of the heavy line doesn't change.
🌍 Your Environment
| Software | Version(s) |
|---|---|
| react-spectrum | 3.0.0-rc.0 of Tabs |
| Browser | Chrome |
| Operating System | Mac |
🧢 Your Company/Team
Adobe Experience Platform Data Collection
🕷 Tracking Issue (optional)
For now it's enough to add the missing dependency to the the right useEffect by passing through the children to ~https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tabs/src/Tabs.tsx#L290~ I think that link became stale, here's a permalink https://github.com/adobe/react-spectrum/blob/e0d42c4627ca243b64ac8f3c1c290ccf4235f3bf/packages/%40react-spectrum/tabs/src/Tabs.tsx#L243
This is probably related. If there is a font loading issue it seems that the tabs don't update where there should be a resize. See this story where the component loads, font loading is delayed, and once the font loads and is applied to the page, the selected tab indicator doesn't line up.
