Fix/searchfield clear focus

packages/@adobe/react-spectrum/test/searchfield/SearchField.test.js

@@ -208,7 +208,7 @@ describe('Search', () => {
       expect(onChange).toHaveBeenLastCalledWith('');
 
       expect(input.value).toBe('');
-      expect(document.activeElement).toBe(input);
+      expect(document.activeElement).not.toBe(input);
 
       expect(onClear).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenLastCalledWith(expect.anything());
@@ -231,7 +231,7 @@ describe('Search', () => {
       expect(onChange).toHaveBeenLastCalledWith('');
 
       expect(input.value).toBe(inputText);
-      expect(document.activeElement).toBe(input);
+      expect(document.activeElement).not.toBe(input);
 
       expect(onClear).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenLastCalledWith(expect.anything());

packages/react-aria-components/test/SearchField.test.js

@@ -62,6 +62,51 @@ describe('SearchField', () => {
     expect(button).toHaveAttribute('aria-label', 'Clear search');
   });
 
+  it.each(['MouseLeft', 'TouchA'])(
+    'clears an unfocused search field without focusing it with %s',
+    async pointer => {
+      let {getByRole} = render(
+        <>
+          <button>Other</button>
+          <TestSearchField />
+        </>
+      );
+
+      let input = getByRole('searchbox');
+      await user.tab();
+      expect(getByRole('button', {name: 'Other'})).toHaveFocus();
+      expect(input).toHaveValue('test');
+
+      await user.pointer({
+        target: getByRole('button', {name: 'Clear search'}),
+        keys: `[${pointer}]`
+      });
+
+      expect(input).toHaveValue('');
+      expect(input).not.toHaveFocus();
+    }
+  );
+
+  it.each(['MouseLeft', 'TouchA'])(
+    'clears a focused search field without moving focus with %s',
+    async pointer => {
+      let {getByRole} = render(<TestSearchField />);
+
+      let input = getByRole('searchbox');
+      await user.tab();
+      expect(input).toHaveFocus();
+      expect(input).toHaveValue('test');
+
+      await user.pointer({
+        target: getByRole('button', {name: 'Clear search'}),
+        keys: `[${pointer}]`
+      });
+
+      expect(input).toHaveValue('');
+      expect(input).toHaveFocus();
+    }
+  );
+
   it('should support slot', () => {
     let {getByRole} = render(
       <SearchFieldContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>

packages/react-aria/src/searchfield/useSearchField.ts

@@ -97,12 +97,6 @@ export function useSearchField(
     }
   };
 
-  let onPressStart = () => {
-    // this is in PressStart for mobile so that touching the clear button doesn't remove focus from
-    // the input and close the keyboard
-    inputRef.current?.focus();
-  };
-
   let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTextField(
     {
       ...props,
@@ -130,8 +124,7 @@ export function useSearchField(
       excludeFromTabOrder: true,
       preventFocusOnPress: true,
       isDisabled: isDisabled || isReadOnly,
-      onPress: onClearButtonClick,
-      onPressStart
+      onPress: onClearButtonClick
     },
     descriptionProps,
     errorMessageProps,

packages/react-aria/test/searchfield/useSearchField.test.js

@@ -22,7 +22,6 @@ describe('useSearchField hook', () => {
   let state = {};
   let setValue = jest.fn();
   let ref = React.createRef();
-  let focus = jest.fn();
   let onClear = jest.fn();
 
   let renderSearchHook = (props, wrapper) => {
@@ -37,12 +36,10 @@ describe('useSearchField hook', () => {
     state.value = '';
     state.setValue = setValue;
     ref.current = document.createElement('input');
-    focus = jest.spyOn(ref.current, 'focus');
   });
 
   afterEach(() => {
     setValue.mockClear();
-    focus.mockClear();
     onClear.mockClear();
   });
 
@@ -154,23 +151,19 @@ describe('useSearchField hook', () => {
 
     describe('with specific onPress behavior', () => {
       let mockEvent = {blah: 1};
-      it('sets the state to "" and focuses the search field', () => {
+      it('sets the state to ""', () => {
         let {clearButtonProps} = renderSearchHook({});
-        clearButtonProps.onPressStart(mockEvent);
         clearButtonProps.onPress(mockEvent);
         expect(state.setValue).toHaveBeenCalledTimes(1);
         expect(state.setValue).toHaveBeenCalledWith('');
-        expect(ref.current.focus).toHaveBeenCalledTimes(1);
       });
 
       it('calls the user provided onClear if provided', () => {
         let {clearButtonProps} = renderSearchHook({onClear});
-        clearButtonProps.onPressStart(mockEvent);
         clearButtonProps.onPress(mockEvent);
         // Verify that onClearButtonClick stuff still triggers
         expect(state.setValue).toHaveBeenCalledTimes(1);
         expect(state.setValue).toHaveBeenCalledWith('');
-        expect(ref.current.focus).toHaveBeenCalledTimes(1);
         // Verify that props.onClear is triggered as well with the same event
         expect(onClear).toHaveBeenCalledTimes(1);
         expect(onClear).toHaveBeenCalledWith();