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

* Revert "Revert "fix: Focus behaviour on inputs inside a FocusScope (adobe#8498)" (…"

This reverts commit 84ff482.

* Update to only happen on Tab

* fix lint

* undo a few other extra and unnecessary selects

Author: snowystinger

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

@@ -373,6 +373,9 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
       e.preventDefault();
       if (nextElement) {
         focusElement(nextElement, true);
+        if (nextElement instanceof getOwnerWindow(nextElement).HTMLInputElement) {
+          nextElement.select();
+        }
       }
     };
 

packages/@react-aria/focus/test/FocusScope.test.js

@@ -354,6 +354,27 @@ describe('FocusScope', function () {
 
       expect(document.activeElement).toBe(input2);
     });
+
+    it('should select all text in input when tabbing', async function () {
+      let {getByTestId} = render(
+        <FocusScope contain>
+          <input data-testid="input1" defaultValue="Test1" />
+          <input data-testid="input2" defaultValue="Test2" />
+          <input data-testid="input3" defaultValue="Test3" />
+        </FocusScope>
+      );
+
+      let input1 = getByTestId('input1');
+      let input2 = getByTestId('input2');
+
+      act(() => {input1.focus();});
+      expect(document.activeElement).toBe(input1);
+
+      await user.tab();
+      expect(document.activeElement).toBe(input2);
+      await user.keyboard('{Delete}');
+      expect(input2.value).toBe('');
+    });
   });
 
   describe('focus restoration', 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>