fix: OverflowTab does not render when no tab is selected

Workday · Dec 6, 2023 · d829f02 · d829f02
1 parent cb8d09f
commit d829f02
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/modules/react/collection/lib/useOverflowListModel.tsx b/modules/react/collection/lib/useOverflowListModel.tsx
@@ -7,7 +7,8 @@ export function getHiddenIds(
   containerWidth: number,
   overflowTargetWidth: number,
   itemWidthCache: Record<string, number>,
-  selectedIds: string[] | 'all'
+  selectedIds: string[] | 'all',
+  items?: any[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
@@ -16,9 +17,13 @@ export function getHiddenIds(
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
-
   if (selectedIds !== 'all' && selectedIds.length) {
-    selectedKey = selectedIds[0];
+    if (items?.length) {
+      // If selectedIds[0] is not in items, use the first id from items
+      selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
+    } else {
+      selectedKey = selectedIds[0];
+    }
   }
 
   if (
@@ -101,7 +106,8 @@ export const useOverflowListModel = createModelHook({
         containerWidthRef.current,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
-        selectedIds
+        selectedIds,
+        config.items
       );
       model.events.select(data);
 
@@ -115,7 +121,8 @@ export const useOverflowListModel = createModelHook({
         containerWidthRef.current,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
-        state.selectedIds
+        state.selectedIds,
+        config.items
       );
 
       setHiddenIds(ids);
@@ -136,7 +143,8 @@ export const useOverflowListModel = createModelHook({
         containerWidthRef.current,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
-        state.selectedIds
+        state.selectedIds,
+        config.items
       );
 
       setHiddenIds(ids);
@@ -153,7 +161,8 @@ export const useOverflowListModel = createModelHook({
         itemWidthCacheRef.current,
         state.selectedIds !== 'all'
           ? state.selectedIds.filter(sId => data.id !== sId)
-          : state.selectedIds
+          : state.selectedIds,
+        config.items
       );
 
       setHiddenIds(ids);

diff --git a/modules/react/tabs/stories/examples/OverflowTabs.tsx b/modules/react/tabs/stories/examples/OverflowTabs.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';