fix: Make value change selected tab #349 (#1540)

h2oai · Jul 13, 2022 · 9e374f9 · 9e374f9
1 parent 989d2c8
commit 9e374f9
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/ui/src/tabs.tsx b/ui/src/tabs.tsx
@@ -66,6 +66,7 @@ export const
       onLinkClick = (item?: Fluent.PivotItem) => {
         const name = item?.props.itemKey
         if (!name) return
+        setSelected(name)
         if (name.startsWith('#')) {
           window.location.hash = name.substr(1)
           return
@@ -80,13 +81,17 @@ export const
           wave.push()
         }
       },
-      tabs = m.items?.map(t => <Fluent.PivotItem key={t.name} itemIcon={t.icon} itemKey={t.name} headerText={t.label} />)
+      tabs = m.items?.map(t => <Fluent.PivotItem key={t.name} itemIcon={t.icon} itemKey={t.name} headerText={t.label} />),
+      [selected, setSelected] = React.useState(m.value)
+
+    React.useEffect(() => setSelected(m.value), [m.value])
+
     return (
       <div className={css.pivot}>
         <Fluent.Pivot
           data-test={m.name}
           className={m.link ? 'w-tabs-link' : 'w-tabs'} //HACK: Marker classes.
-          defaultSelectedKey={m.value}
+          selectedKey={selected}
           linkFormat={m.link ? 'links' : 'tabs'}
           onLinkClick={onLinkClick}>{tabs}</Fluent.Pivot>
       </div>