From 0c92f3a88f36a52fef09cba1a759a0a48255ec19 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 26 Jan 2023 11:32:14 +0100
Subject: [PATCH] Fix tab reference

---
 code/ui/components/src/tabs/tabs.hooks.tsx | 6 +++---
 code/ui/components/src/tabs/tabs.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
index cdc46e2cbf71..68bb39ba908b 100644
--- 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
index e7160bee5251..49b28998b02e 100644
--- 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"