chore: Shift focus to active ref by clicking / pressing on the recovery CTA

Author: georgylobko

src/select/__tests__/select.test.tsx

@@ -210,6 +210,7 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
       wrapper.openDropdown();
       onLoadItems.mockClear();
       wrapper.findErrorRecoveryButton({ expandToViewport })!.click();
+      expect(wrapper.findFilteringInput()!.findNativeInput()!.getElement()).toHaveFocus();
       expect(onLoadItems).toHaveBeenCalledWith({ filteringText: '', firstPage: false, samePage: true });
     });
 

src/select/internal.tsx

@@ -122,6 +122,7 @@ const InternalSelect = React.forwardRef(
       highlightOption,
       selectOption,
       announceSelected,
+      focusActiveRef,
     } = useSelect({
       selectedOptions: selectedOption ? [selectedOption] : [],
       updateSelectedOption: option => fireNonCancelableEvent(onChange, { selectedOption: option }),
@@ -197,7 +198,10 @@ const InternalSelect = React.forwardRef(
       noMatch,
       filteringResultsText: filteredText,
       errorIconAriaLabel,
-      onRecoveryClick: handleRecoveryClick,
+      onRecoveryClick: () => {
+        handleRecoveryClick();
+        focusActiveRef();
+      },
       hasRecoveryCallback: !!onLoadItems,
     });
 

src/select/utils/use-select.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { RefObject } from 'react';
+import React, { RefObject, useCallback } from 'react';
 import { useEffect, useRef } from 'react';
 
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
@@ -337,14 +337,18 @@ export function useSelect({
     hasFilter,
   ]);
 
+  const focusActiveRef = useCallback(() => {
+    // dropdown-fit calculations ensure that the dropdown will fit inside the current
+    // viewport, so prevent the browser from trying to scroll it into view (e.g. if
+    // scroll-padding-top is set on a parent)
+    activeRef.current?.focus({ preventScroll: true });
+  }, [activeRef]);
+
   useEffect(() => {
     if (isOpen && !embedded) {
-      // dropdown-fit calculations ensure that the dropdown will fit inside the current
-      // viewport, so prevent the browser from trying to scroll it into view (e.g. if
-      // scroll-padding-top is set on a parent)
-      activeRef.current?.focus({ preventScroll: true });
+      focusActiveRef();
     }
-  }, [isOpen, activeRef, embedded]);
+  }, [isOpen, activeRef, embedded, focusActiveRef]);
 
   useForwardFocus(externalRef, triggerRef as React.RefObject<HTMLElement>);
   const highlightedGroupSelected =
@@ -366,5 +370,6 @@ export function useSelect({
     selectOption,
     announceSelected,
     dialogId,
+    focusActiveRef,
   };
 }