chore: Shift focus to active ref by clicking / pressing on the recovery CTA (#4115)

Author: georgylobko

src/multiselect/__tests__/multiselect.test.tsx

@@ -7,6 +7,7 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
 
 import '../../__a11y__/to-validate-a11y';
+import TestI18nProvider from '../../../lib/components/i18n/testing';
 import Multiselect, { MultiselectProps } from '../../../lib/components/multiselect';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
@@ -534,6 +535,25 @@ describe.each([true, false])('footer live announcements [expandToViewport=%s]',
   });
 });
 
+test('Shifts focus to the filter on retry failed request', () => {
+  const { wrapper } = renderMultiselect(
+    <TestI18nProvider messages={{ select: { recoveryText: 'Custom recovery text' } }}>
+      <Multiselect
+        selectedOptions={[]}
+        options={defaultOptions}
+        onChange={() => {}}
+        onLoadItems={() => {}}
+        errorText="Error fetching items"
+        statusType="error"
+        filteringType="auto"
+      />
+    </TestI18nProvider>
+  );
+  wrapper.openDropdown();
+  wrapper.findErrorRecoveryButton()!.click();
+  expect(wrapper.findFilteringInput()!.findNativeInput()!.getElement()).toHaveFocus();
+});
+
 test('fires a change event when user selects a group option from the dropdown', () => {
   const onChange = jest.fn();
   const { wrapper } = renderMultiselect(

src/multiselect/use-multiselect.tsx

@@ -190,6 +190,7 @@ export function useMultiselect({
     getOptionProps,
     highlightOption,
     announceSelected,
+    focusActiveRef,
   } = useSelect({
     selectedOptions,
     updateSelectedOption,
@@ -233,7 +234,10 @@ export function useMultiselect({
     isNoMatch,
     noMatch,
     filteringResultsText: filteredText,
-    onRecoveryClick: handleRecoveryClick,
+    onRecoveryClick: () => {
+      handleRecoveryClick();
+      focusActiveRef();
+    },
     errorIconAriaLabel: errorIconAriaLabel,
     hasRecoveryCallback: !!onLoadItems,
   });

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,
   };
 }