Fix tab reference

storybookjs · Jan 26, 2023 · 4d3aae7 · 4d3aae7
1 parent 29f6344
commit 4d3aae7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { sanitize } from '@storybook/csf';
 import { styled } from '@storybook/theming';
 import useResizeObserver from 'use-resize-observer';
@@ -105,7 +105,7 @@ export function useList(list: ChildrenList) {
                 style={{ visibility: 'hidden' }}
                 tabIndex={-1}
                 ref={(ref: HTMLButtonElement) => {
-                  tabRefs.current.set(title, ref);
+                  tabRefs.current.set(id, ref);
                 }}
                 className="tabbutton"
                 type="button"
@@ -134,8 +134,8 @@ export function useList(list: ChildrenList) {
     let widthSum = 0;
 
     const newInvisibleList = list.filter((item) => {
-      const { title } = item;
-      const tabButton = tabRefs.current.get(title);
+      const { id } = item;
+      const tabButton = tabRefs.current.get(id);
 
       if (!tabButton) {
         return false;
@@ -156,10 +156,15 @@ export function useList(list: ChildrenList) {
     if (newVisibleList.length !== visibleList.length || previousList.current !== list) {
       setVisibleList(newVisibleList);
       setInvisibleList(newInvisibleList);
-      previousList.current = list;
     }
   }, [invisibleList.length, list, visibleList]);
 
+  useEffect(() => {
+    if (previousList.current !== list) {
+      previousList.current = list;
+    }
+  }, [list]);
+
   useLayoutEffect(setTabLists, [setTabLists, tabBarWidth]);
 
   return {

diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -152,12 +152,12 @@ export const Tabs: FC<TabsProps> = memo(
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <WrapperChildren backgroundColor={backgroundColor}>
           <TabBar ref={tabBarRef} role="tablist">
-            {visibleList.map(({ title, id, active, color }, index) => {
+            {visibleList.map(({ title, id, active, color }) => {
               return (
                 <TabButton
                   id={`tabbutton-${sanitize(title)}`}
                   ref={(ref: HTMLButtonElement) => {
-                    tabRefs.current.set(title, ref);
+                    tabRefs.current.set(id, ref);
                   }}
                   className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
                   type="button"