fix: Properly clear Autocomplete wrapped SearchField when "x" button is pressed

packages/@react-aria/autocomplete/package.json

@@ -27,6 +27,7 @@
     "@react-aria/interactions": "^3.22.5",
     "@react-aria/listbox": "^3.13.6",
     "@react-aria/searchfield": "^3.7.11",
+    "@react-aria/textfield": "^3.15.0",
     "@react-aria/utils": "^3.26.0",
     "@react-stately/autocomplete": "3.0.0-alpha.1",
     "@react-stately/combobox": "^3.10.1",

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

@@ -11,12 +11,12 @@
  */
 
 import {AriaLabelingProps, BaseEvent, DOMProps, RefObject} from '@react-types/shared';
+import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {ChangeEvent, InputHTMLAttributes, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
 import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, isCtrlKeyPressed, mergeProps, mergeRefs, UPDATE_ACTIVEDESCENDANT, useEffectEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {InputHTMLAttributes, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {useKeyboard} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface CollectionOptions extends DOMProps, AriaLabelingProps {
@@ -43,6 +43,8 @@ export interface AriaAutocompleteOptions extends Omit<AriaAutocompleteProps, 'ch
 export interface AutocompleteAria {
   /** Props for the autocomplete input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the autocomplete textfield/searchfield element. These should be passed to the textfield/searchfield aria hooks respectively. */
+  textFieldProps: AriaTextFieldProps,
   /** Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu). */
   collectionProps: CollectionOptions,
   /** Ref to attach to the wrapped collection. */
@@ -138,16 +140,16 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
   });
 
   // TODO: update to see if we can tell what kind of event (paste vs backspace vs typing) is happening instead
-  let onChange = (e: ChangeEvent<HTMLInputElement>) => {
+  let onChange = (value: string) => {
     // Tell wrapped collection to focus the first element in the list when typing forward and to clear focused key when deleting text
     // for screen reader announcements
-    if (state.inputValue !== e.target.value && state.inputValue.length <= e.target.value.length) {
+    if (state.inputValue !== value && state.inputValue.length <= value.length) {
       focusFirstItem();
     } else {
       clearVirtualFocus();
     }
 
-    state.setInputValue(e.target.value);
+    state.setInputValue(value);
   };
 
   // For textfield specific keydown operations
@@ -166,12 +168,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
         // Early return for Escape here so it doesn't leak the Escape event from the simulated collection event below and
         // close the dialog prematurely. Ideally that should be up to the discretion of the input element hence the check
         // for isPropagationStopped
-        // Also set the inputValue to '' to cover Firefox case where Esc doesn't actually clear searchfields. Normally we already
-        // handle this in useSearchField, but we are directly setting the inputValue on the input element in RAC Autocomplete instead of
-        // passing it to the SearchField via props. This means that a controlled value set on the Autocomplete isn't synced up with the
-        // SearchField until the user makes a change to the field's value via typing
         if (e.isPropagationStopped()) {
-          state.setInputValue('');
           return;
         }
         break;
@@ -249,8 +246,6 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     };
   }, [inputRef, onKeyUpCapture]);
 
-  let {keyboardProps} = useKeyboard({onKeyDown});
-
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/autocomplete');
   let collectionProps = useLabels({
     id: collectionId,
@@ -267,9 +262,6 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
 
   return {
     inputProps: {
-      value: state.inputValue,
-      onChange,
-      ...keyboardProps,
       autoComplete: 'off',
       'aria-haspopup': 'listbox',
       'aria-controls': collectionId,
@@ -281,6 +273,11 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       // This disable's the macOS Safari spell check auto corrections.
       spellCheck: 'false'
     },
+    textFieldProps: {
+      value: state.inputValue,
+      onChange,
+      onKeyDown
+    },
     collectionProps: mergeProps(collectionProps, {
       // TODO: shouldFocusOnHover? shouldFocusWrap? Should it be up to the wrapped collection?
       shouldUseVirtualFocus: true,

packages/react-aria-components/src/Autocomplete.tsx

@@ -16,6 +16,8 @@ import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
 import React, {createContext, RefObject, useRef} from 'react';
+import {SearchFieldContext} from './SearchField';
+import {TextFieldContext} from './TextField';
 
 export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {}
 
@@ -44,6 +46,7 @@ export function UNSTABLE_Autocomplete(props: AutocompleteProps) {
 
   let {
     inputProps,
+    textFieldProps,
     collectionProps,
     collectionRef: mergedCollectionRef,
     filterFn
@@ -58,6 +61,8 @@ export function UNSTABLE_Autocomplete(props: AutocompleteProps) {
     <Provider
       values={[
         [UNSTABLE_AutocompleteStateContext, state],
+        [SearchFieldContext, {...textFieldProps}],
+        [TextFieldContext, {...textFieldProps}],
         [InputContext, {...inputProps, ref: inputRef}],
         [UNSTABLE_InternalAutocompleteContext, {
           filterFn,

packages/react-aria-components/test/Autocomplete.test.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaAutocompleteTests} from './AriaAutocomplete.test-util';
-import {Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, SearchField, Separator, Text, UNSTABLE_Autocomplete} from '..';
+import {Button, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, SearchField, Separator, Text, UNSTABLE_Autocomplete} from '..';
 import {pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React, {ReactNode} from 'react';
 import {useAsyncList} from 'react-stately';
@@ -110,6 +110,7 @@ let AutocompleteWrapper = ({autocompleteProps = {}, inputProps = {}, children}:
       <SearchField {...inputProps}>
         <Label style={{display: 'block'}}>Test</Label>
         <Input />
+        <Button>✕</Button>
         <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
       </SearchField>
       {children}
@@ -199,6 +200,26 @@ describe('Autocomplete', () => {
     expect(onKeyDown).not.toHaveBeenCalled();
     onKeyDown.mockReset();
   });
+
+  it('should prevent clear the input field when clicking on the clear button', async () => {
+    let {getByRole} = render(
+      <AutocompleteWrapper>
+        <StaticMenu />
+      </AutocompleteWrapper>
+    );
+
+    let input = getByRole('searchbox');
+    await user.tab();
+    expect(document.activeElement).toBe(input);
+    await user.keyboard('Foo');
+    expect(input).toHaveValue('Foo');
+
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Clear search');
+    await user.click(button);
+
+    expect(input).toHaveValue('');
+  });
 });
 
 AriaAutocompleteTests({

yarn.lock

@@ -5916,6 +5916,7 @@ __metadata:
     "@react-aria/interactions": "npm:^3.22.5"
     "@react-aria/listbox": "npm:^3.13.6"
     "@react-aria/searchfield": "npm:^3.7.11"
+    "@react-aria/textfield": "npm:^3.15.0"
     "@react-aria/utils": "npm:^3.26.0"
     "@react-stately/autocomplete": "npm:3.0.0-alpha.1"
     "@react-stately/combobox": "npm:^3.10.1"