diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 1c449ba292c..b77640ad380 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -91,6 +91,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl // 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(); + inputRef.current.select?.(); } let target = e.target as Element | null; diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx index ac480963988..fd647ee86ed 100644 --- a/packages/@react-aria/focus/src/FocusScope.tsx +++ b/packages/@react-aria/focus/src/FocusScope.tsx @@ -372,6 +372,7 @@ function useFocusContainment(scopeRef: RefObject, contain?: bo // restore focus to the previously focused node or the first tabbable element in the active scope. if (focusedNode.current) { focusedNode.current.focus(); + (focusedNode.current as HTMLInputElement).select?.(); } else if (activeScope && activeScope.current) { focusFirstInScope(activeScope.current); } @@ -400,6 +401,7 @@ function useFocusContainment(scopeRef: RefObject, contain?: bo if (target && target.isConnected) { focusedNode.current = target; focusedNode.current?.focus(); + (focusedNode.current as HTMLInputElement).select?.(); } else if (activeScope.current) { focusFirstInScope(activeScope.current); } @@ -487,6 +489,7 @@ function focusElement(element: FocusableElement | null, scroll = false) { } else if (element != null) { try { element.focus(); + (element as HTMLInputElement).select?.(); } catch { // ignore } diff --git a/packages/@react-aria/interactions/src/focusSafely.ts b/packages/@react-aria/interactions/src/focusSafely.ts index 384f3f363f7..7e739ec931c 100644 --- a/packages/@react-aria/interactions/src/focusSafely.ts +++ b/packages/@react-aria/interactions/src/focusSafely.ts @@ -37,9 +37,11 @@ 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); + (element as HTMLInputElement).select?.(); } }); } else { focusWithoutScrolling(element); + (element as HTMLInputElement).select?.(); } } diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js index 8a6b7ee6e54..913a527a04a 100644 --- a/packages/@react-spectrum/combobox/test/ComboBox.test.js +++ b/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 () { diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx index e178ef0c56f..e4fdfcd4303 100644 --- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx @@ -48,9 +48,12 @@ const ExampleRender = (args: ExampleRenderProps): ReactElement => ( Dialog title
Header
- {[...Array(args.paragraphs)].map((_, i) => -

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

- )} + <> + {[...Array(args.paragraphs)].map((_, i) => +

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

+ )} + +
Don't show this again