fix(List): fix ListTitle getting focus on initialization

packages/core/src/components/List/List.tsx

@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   ReactElement,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState
@@ -26,6 +27,7 @@ import {
   getListItemIndexById,
   getNextListItemIndex,
   getPrevListItemIndex,
+  isListItem,
   useListId
 } from "./utils/ListUtils";
 import styles from "./List.module.scss";
@@ -113,6 +115,14 @@ const List: VibeComponent<ListProps> & {
       ref: componentRef
     });
 
+    useEffect(() => {
+      const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));
+      if (firstFocusableIndex !== -1) {
+        setFocusIndex(firstFocusableIndex);
+        updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));
+      }
+    }, [updateFocusedItem]);
+
     const overrideChildren = useMemo(() => {
       let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];
       if (renderOnlyVisibleItems) {
@@ -125,10 +135,11 @@ const List: VibeComponent<ListProps> & {
           }
 
           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),
-            tabIndex: focusIndex === index ? 0 : -1,
+            tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,
             id,
             component: getListItemComponentType(component)
           });

packages/core/src/components/List/utils/ListUtils.ts

@@ -36,7 +36,7 @@ export const getListItemComponentType = (listComponent: ListElement): ListItemEl
   }
 };
 
-const isListItem = (element: HTMLElement) => {
+export const isListItem = (element: HTMLElement) => {
   return element && element.getAttribute("role") === "option";
 };