fix(apollo-react): improve Toolbox keyboard nav with Space, Tab, and index restore

Author: david-rios-uipath

packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx

@@ -10,6 +10,7 @@ interface SearchBoxProps {
   placeholder?: string;
   inputRef?: React.RefObject<HTMLInputElement | null>;
   onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
+  navigateToFirstItem?: () => void;
   activeDescendantId?: string;
 }
 
@@ -20,6 +21,7 @@ export const SearchBox = memo(function SearchBox({
   placeholder = 'Search...',
   inputRef: externalInputRef,
   onNavigationKeyDown,
+  navigateToFirstItem,
   activeDescendantId,
 }: SearchBoxProps) {
   const internalRef = useRef<HTMLInputElement>(null);
@@ -29,6 +31,17 @@ export const SearchBox = memo(function SearchBox({
     inputRef.current?.focus();
   }, [inputRef]);
 
+  const handleClearButtonKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      inputRef.current?.focus();
+
+      if (!e.shiftKey) {
+        navigateToFirstItem?.();
+      }
+    }
+  };
+
   return (
     <StyledSearchForm
       autoComplete="off"
@@ -54,7 +67,12 @@ export const SearchBox = memo(function SearchBox({
           aria-activedescendant={activeDescendantId}
         />
         {value && (
-          <button type="button" className="searchbox-clear" onClick={clear}>
+          <button
+            type="button"
+            className="searchbox-clear"
+            onClick={clear}
+            onKeyDown={handleClearButtonKeyDown}
+          >
             <ApIcon name="close" size="16px" />
           </button>
         )}

packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx

@@ -129,6 +129,7 @@ export function Toolbox<T>({
   const navigationStack = useNavigationStack<{
     items: ListItem<T>[];
     parentItem: ListItem<T> | null;
+    activeIndex: number;
   }>();
 
   const [activeIndex, setActiveIndex] = useState(SEARCH_BAR_INDEX);
@@ -175,13 +176,19 @@ export function Toolbox<T>({
     [listRef]
   );
 
+  const navigateToFirstItem = useCallback(() => {
+    const renderedItems = listViewRef.current?.renderedItems ?? [];
+    const firstIndex = getFirstSelectableIndex(renderedItems);
+    if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+  }, [navigateToIndex]);
+
   const clearSearch = useCallback(() => {
     setSearch('');
     setSearchedItems([]);
     setSearchLoading(false);
     setIsSearchingInitialItems(true);
-    setActiveIndex(SEARCH_BAR_INDEX);
-  }, []);
+    navigateToIndex(SEARCH_BAR_INDEX);
+  }, [navigateToIndex]);
 
   const handleSearch = useCallback(
     async (query: string) => {
@@ -218,7 +225,6 @@ export function Toolbox<T>({
 
   const handleBackTransition = useCallback(() => {
     startTransition('back');
-    setActiveIndex(SEARCH_BAR_INDEX);
 
     const previousState = navigationStack.pop();
 
@@ -227,12 +233,17 @@ export function Toolbox<T>({
       setCurrentParentItem(previousState.data.parentItem);
     }
 
-    if (isSearching) {
-      clearSearch();
-    }
+    // Reset search state without calling clearSearch (which navigates to search bar).
+    setSearch('');
+    setSearchedItems([]);
+    setSearchLoading(false);
+    setIsSearchingInitialItems(true);
+
+    const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
+    navigateToIndex(restoredIndex);
 
     onBack?.();
-  }, [navigationStack, isSearching, onBack, clearSearch, startTransition]);
+  }, [navigationStack, onBack, startTransition, navigateToIndex]);
 
   const handleItemSelect = useCallback(
     async (item: ListItem<T>) => {
@@ -247,7 +258,11 @@ export function Toolbox<T>({
           : item.children;
       navigationStack.push({
         title: currentParentItem?.name || title,
-        data: { items, parentItem: currentParentItem },
+        data: {
+          items,
+          parentItem: currentParentItem,
+          activeIndex: isSearching ? SEARCH_BAR_INDEX : activeIndex,
+        },
       });
       setItems(nestedItems);
       setCurrentParentItem(item);
@@ -256,7 +271,17 @@ export function Toolbox<T>({
       startTransition('forward');
       setChildrenLoading(false);
     },
-    [navigationStack, currentParentItem, title, items, clearSearch, startTransition, onItemSelect]
+    [
+      navigationStack,
+      currentParentItem,
+      title,
+      items,
+      activeIndex,
+      isSearching,
+      clearSearch,
+      startTransition,
+      onItemSelect,
+    ]
   );
 
   useEffect(() => {
@@ -303,6 +328,7 @@ export function Toolbox<T>({
           data: {
             items: newInitialItems,
             parentItem: null,
+            activeIndex: stackItem.data.activeIndex,
           },
         };
       }
@@ -320,6 +346,7 @@ export function Toolbox<T>({
         data: {
           items: updatedItems,
           parentItem: updatedParentItem,
+          activeIndex: stackItem.data.activeIndex,
         },
       };
     });
@@ -356,15 +383,13 @@ export function Toolbox<T>({
 
       const navigateDown = () => {
         if (activeIndex === SEARCH_BAR_INDEX) {
-          const firstIndex = getFirstSelectableIndex(renderedItems);
-          if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+          navigateToFirstItem();
         } else {
           const nextIndex = getNextSelectableIndex(renderedItems, activeIndex, 'down');
           if (nextIndex !== SEARCH_BAR_INDEX) {
             navigateToIndex(nextIndex);
           } else {
-            const firstIndex = getFirstSelectableIndex(renderedItems);
-            if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+            navigateToFirstItem();
           }
         }
       };
@@ -384,8 +409,9 @@ export function Toolbox<T>({
           navigateUp();
           break;
         }
+        case ' ':
         case 'Enter': {
-          if (activeIndex === SEARCH_BAR_INDEX) break;
+          if (activeIndex === SEARCH_BAR_INDEX) return;
 
           const renderItem = renderedItems[activeIndex];
           if (renderItem?.type === 'item') {
@@ -411,6 +437,11 @@ export function Toolbox<T>({
           break;
         }
         case 'Tab': {
+          // When on the search bar with text, defer behavior handling to SearchBox
+          if (activeIndex === SEARCH_BAR_INDEX && search.length > 0 && !e.shiftKey) {
+            break;
+          }
+
           e.preventDefault();
           if (e.shiftKey) {
             navigateUp();
@@ -423,8 +454,7 @@ export function Toolbox<T>({
           if (activeIndex === SEARCH_BAR_INDEX) break;
 
           e.preventDefault();
-          const firstIndex = getFirstSelectableIndex(renderedItems);
-          if (firstIndex !== SEARCH_BAR_INDEX) navigateToIndex(firstIndex);
+          navigateToFirstItem();
           break;
         }
         case 'End': {
@@ -443,6 +473,7 @@ export function Toolbox<T>({
       activeIndex,
       navigationStack.canGoBack,
       navigateToIndex,
+      navigateToFirstItem,
       handleItemSelect,
       handleBackTransition,
     ]
@@ -500,6 +531,7 @@ export function Toolbox<T>({
           placeholder="Search"
           inputRef={searchInputRef}
           onNavigationKeyDown={handleNavigationKeyDown}
+          navigateToFirstItem={navigateToFirstItem}
           activeDescendantId={activeDescendantId}
         />