fix seleted item

mondaycom · Dec 10, 2024 · 452506a · 452506a
1 parent d407cf8
commit 452506a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/core/src/components/List/List.tsx b/packages/core/src/components/List/List.tsx
@@ -116,10 +116,16 @@ const List: VibeComponent<ListProps> & {
     });
 
     useEffect(() => {
-      const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));
-      if (firstFocusableIndex !== -1) {
-        setFocusIndex(firstFocusableIndex);
-        updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));
+      const selectedItemIndex = childrenRefs.current.findIndex(
+        child => isListItem(child) && child?.getAttribute("aria-selected") === "true"
+      );
+      if (selectedItemIndex !== -1) {
+        updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));
+      } else {
+        const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));
+        if (firstFocusableIndex !== -1) {
+          updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));
+        }
       }
     }, [updateFocusedItem]);
 
@@ -133,9 +139,9 @@ const List: VibeComponent<ListProps> & {
           if (!React.isValidElement(child)) {
             return child;
           }
-
           const id = (child.props as { id: string }).id || `${overrideId}-item-${index}`;
           const isFocusableItem = isListItem(childrenRefs.current[index]);
+
           return React.cloneElement(child, {
             // @ts-ignore not sure how to deal with ref here
             ref: ref => (childrenRefs.current[index] = ref),

diff --git a/packages/core/src/components/List/__tests__/__snapshots__/List.test.js.snap b/packages/core/src/components/List/__tests__/__snapshots__/List.test.js.snap
@@ -29,7 +29,7 @@ exports[`List renders correctly with list items 1`] = `
     onFocus={[Function]}
     onMouseEnter={[Function]}
     role="option"
-    tabIndex={0}
+    tabIndex={-1}
   >
     1
   </li>