fix: duplicate key in tabs component (#882)

This commit adds a useMemo to the Tabs component so that we can use a UUID for the
keys of the Tabs children. The UUID allows us to generate a unique key, while the
useMemo prevents the UUID from being recalculated unless the children change.

Closes D2IQ-92719

Author: seialkali

packages/tabs/components/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Tabs as ReactTabs, TabList, TabPanel } from "react-tabs";
 import { injectGlobal, cx } from "@emotion/css";
-
+import uuid from "uuid";
 import { TabItemProps } from "./TabItem";
 import { TabTitle } from "..";
 import {
@@ -13,9 +13,7 @@ import {
 import { listReset } from "../../shared/styles/styleUtils";
 import { BreakpointConfig } from "../../shared/styles/breakpoints";
 import { fullHeightTabs, getTabLayout } from "../style";
-
 export const defaultTabDirection = "horiz";
-
 // Copy & paste from node_modules/react-tabs/style/react-tabs.css
 // Also changed to better fit the ui kit styles.
 // This is needed to give the tabs a style
@@ -24,53 +22,44 @@ injectGlobal`
 .react-tabs {
   -webkit-tap-highlight-color: transparent;
 }
-
 .react-tabs__tab-list {
   ${listReset};
 }
-
 .react-tabs__tab {
   position: relative;
   cursor: pointer;
   font-weight: ${fontWeightMedium};
   color: ${themeTextColorPrimary};
-
   &:after{
     content: "";
     position: absolute;
     background: ${themeBrandPrimary};
     display: none;
   }
 }
-
 .react-tabs__tab:focus {
   outline: none;
   background: ${themeBgHover}
 }
-
 .react-tabs__tab--selected {
   &:after{
     display: block;
   }
   color: ${themeBrandPrimary};
 }
-
 .react-tabs__tab--disabled {
   color: GrayText;
   cursor: default;
 }
-
 .react-tabs__tab-panel {
   display: none;
   flex-grow: 1;
 }
-
 .react-tabs__tab-panel--selected {
   display: block;
 }
 `;
 /* eslint-enable */
-
 export type TabDirections = "horiz" | "vert";
 export type TabDirection = BreakpointConfig<TabDirections>;
 export type TabSelected = string;
@@ -82,52 +71,55 @@ export interface TabsProps {
   onSelect?: (tabIndex: number) => void;
   direction?: TabDirection;
 }
-
 const Tabs = ({
   children,
   selectedIndex,
   onSelect,
   direction = defaultTabDirection
 }: TabsProps) => {
-  const { tabs, tabsContent } = (
-    React.Children.toArray(children) as Array<React.ReactElement<TabItemProps>>
-  )
-    .filter(item => React.isValidElement<TabItemProps>(item))
-    .reduce<{
-      tabs: React.ReactNode[];
-      tabsContent: React.ReactNode[];
-    }>(
-      (acc, item) => {
-        const { tabs = [], tabsContent = [] } = acc;
-        const { children } = item.props;
-        const key = item.key ? item.key : undefined;
-        const childrenWithKeys = React.Children.toArray(children).map(child =>
-          React.isValidElement<typeof TabTitle>(child)
-            ? React.cloneElement(child, { key })
-            : child
-        );
-
-        const title = childrenWithKeys.find(
-          child =>
-            React.isValidElement<typeof TabTitle>(child) &&
-            child.type === TabTitle
-        );
-        const tabChildren = childrenWithKeys.filter(
-          child => !(React.isValidElement(child) && child.type === TabTitle)
-        );
-        return {
-          tabs: [...tabs, title],
-          tabsContent: [
-            ...tabsContent,
-            ...(tabChildren.length
-              ? [<TabPanel key={key}>{tabChildren}</TabPanel>]
-              : [])
-          ]
-        };
-      },
-      { tabs: [], tabsContent: [] }
-    );
-
+  const { tabs, tabsContent } = React.useMemo(() => {
+    return (
+      React.Children.toArray(children) as Array<
+        React.ReactElement<TabItemProps>
+      >
+    )
+      .filter(item => React.isValidElement<TabItemProps>(item))
+      .reduce<{
+        tabs: React.ReactNode[];
+        tabsContent: React.ReactNode[];
+      }>(
+        (acc, item) => {
+          const { tabs = [], tabsContent = [] } = acc;
+          const { children } = item.props;
+          const key = item.key ? item.key : undefined;
+          const childrenWithKeys = React.Children.toArray(children).map(
+            child => {
+              return React.isValidElement<typeof TabTitle>(child)
+                ? React.cloneElement(child, { key: `${key}-${uuid()}` })
+                : child;
+            }
+          );
+          const title = childrenWithKeys.find(
+            child =>
+              React.isValidElement<typeof TabTitle>(child) &&
+              child.type === TabTitle
+          );
+          const tabChildren = childrenWithKeys.filter(
+            child => !(React.isValidElement(child) && child.type === TabTitle)
+          );
+          return {
+            tabs: [...tabs, title],
+            tabsContent: [
+              ...tabsContent,
+              ...(tabChildren.length
+                ? [<TabPanel key={key}>{tabChildren}</TabPanel>]
+                : [])
+            ]
+          };
+        },
+        { tabs: [], tabsContent: [] }
+      );
+  }, [children]);
   return (
     <ReactTabs
       className={cx("react-tabs", {
@@ -146,5 +138,4 @@ const Tabs = ({
     </ReactTabs>
   );
 };
-
 export default React.memo(Tabs);

packages/tabs/stories/Tabs.stories.tsx

@@ -38,7 +38,8 @@ const Template: Story<TabsProps> = ({ direction, ...args }: TabsProps) => {
     >
       <TabItem>
         <TabTitle>Tab 1</TabTitle>
-        Tab content.
+        <div>Tab content - Section 1.</div>
+        <div>Tab content - Section 2.</div>
       </TabItem>
       <TabItem>
         <TabTitle>Tab 2</TabTitle>