Fix tab reference

storybookjs · Jan 26, 2023 · 0c92f3a · 0c92f3a
1 parent 29f6344
commit 0c92f3a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -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;

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"