fix: Focus behaviour on inputs inside a FocusScope (#8498)

* fix: Focus behaviour on inputs inside a FocusScope

* fix combobox tests

* only do the select for html input elements

Author: snowystinger

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, getOwnerWindow, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -106,6 +106,9 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     // Ensure input is focused if the user clicks on the collection directly.
     if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
       inputRef.current.focus();
+      if (inputRef.current instanceof getOwnerWindow(inputRef.current).HTMLInputElement) {
+        inputRef.current.select();
+      }
     }
 
     let target = e.target as Element | null;

packages/@react-aria/focus/src/FocusScope.tsx

@@ -15,6 +15,7 @@ import {
   getActiveElement,
   getEventTarget,
   getOwnerDocument,
+  getOwnerWindow,
   isAndroid,
   isChrome,
   isFocusable,
@@ -371,6 +372,10 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         // restore focus to the previously focused node or the first tabbable element in the active scope.
         if (focusedNode.current) {
           focusedNode.current.focus();
+
+          if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+            focusedNode.current.select();
+          }
         } else if (activeScope && activeScope.current) {
           focusFirstInScope(activeScope.current);
         }
@@ -399,6 +404,9 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           if (target && target.isConnected) {
             focusedNode.current = target;
             focusedNode.current?.focus();
+            if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+              focusedNode.current.select();
+            }
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
           }
@@ -486,6 +494,9 @@ function focusElement(element: FocusableElement | null, scroll = false) {
   } else if (element != null) {
     try {
       element.focus();
+      if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+        element.select();
+      }
     } catch {
       // ignore
     }

packages/@react-aria/interactions/src/focusSafely.ts

@@ -15,6 +15,7 @@ import {
   focusWithoutScrolling,
   getActiveElement,
   getOwnerDocument,
+  getOwnerWindow,
   runAfterTransition
 } from '@react-aria/utils';
 import {getInteractionModality} from './useFocusVisible';
@@ -37,9 +38,15 @@ export function focusSafely(element: FocusableElement): void {
       // If focus did not move and the element is still in the document, focus it.
       if (getActiveElement(ownerDocument) === lastFocusedElement && element.isConnected) {
         focusWithoutScrolling(element);
+        if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+          element.select();
+        }
       }
     });
   } else {
     focusWithoutScrolling(element);
+    if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+      element.select();
+    }
   }
 }

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -4398,7 +4398,7 @@ describe('ComboBox', function () {
       if (Method === 'escape key') {
         expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Two').id}`);
       } else {
-        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
+        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
       }
       tree.unmount();
 
@@ -4412,7 +4412,7 @@ describe('ComboBox', function () {
 
       await performInteractions(tree);
       expect(() => tree.getByTestId('tray')).toThrow();
-      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
+      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
     });
 
     it('menutrigger=focus doesn\'t reopen the tray on close', async function () {

packages/@react-spectrum/s2/stories/Dialog.stories.tsx

@@ -48,9 +48,12 @@ const ExampleRender = (args: ExampleRenderProps): ReactElement => (
           <Heading slot="title">Dialog title</Heading>
           <Header>Header</Header>
           <Content>
-            {[...Array(args.paragraphs)].map((_, i) =>
-              <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
-            )}
+            <>
+              {[...Array(args.paragraphs)].map((_, i) =>
+                <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+              )}
+              <input type="text" defaultValue="Hello" />
+            </>
           </Content>
           <Footer><Checkbox>Don't show this again</Checkbox></Footer>
           <ButtonGroup>