Tabs: recalculate stripe position when value changes (#2402)

iTwin · Jan 14, 2025 · c48397e · c48397e
1 parent 74b647f
commit c48397e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/.changeset/many-eggs-chew.md b/.changeset/many-eggs-chew.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed an issue in `Tabs` where it wasn't recalculating the active stripe position when a new tab was asynchronously added to the tablist.
diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx
@@ -286,6 +286,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     tabsWidth, // to fix visual artifact on initial render
     setStripeProperties,
     tablistRef,
+    value, // since Tab with a different value might be later added to the same position
   ]);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {