Make useSearchField behave close to browser (#6404)

Make `useSearchField` behave close to browser

Author: QzCurious

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

@@ -49,23 +49,26 @@ export function useSearchField(
   let {
     isDisabled,
     isReadOnly,
-    onSubmit = () => {},
+    onSubmit,
     onClear,
     type = 'search'
   } = props;
 
   let onKeyDown = (e) => {
     const key = e.key;
 
-    if (key === 'Enter') {
+    if (key === 'Enter' && (isDisabled || isReadOnly)) {
       e.preventDefault();
     }
 
     if (isDisabled || isReadOnly) {
       return;
     }
 
-    if (key === 'Enter') {
+    // for backward compatibility;
+    // otherwise, "Enter" on an input would trigger a form submit, the default browser behavior
+    if (key === 'Enter' && onSubmit) {
+      e.preventDefault();
       onSubmit(state.value);
     }
 

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

@@ -67,21 +67,20 @@ describe('useSearchField hook', () => {
         onSubmit.mockClear();
       });
 
-      it('preventDefault is called for Enter and not Escape', () => {
+      it('preventDefault and stopPropagation are not called for Escape', () => {
         let {inputProps} = renderSearchHook({});
-        inputProps.onKeyDown(event('Enter'));
-        expect(preventDefault).toHaveBeenCalledTimes(1);
         inputProps.onKeyDown(event('Escape'));
-        expect(preventDefault).toHaveBeenCalledTimes(1);
+        expect(preventDefault).toHaveBeenCalledTimes(0);
+        expect(stopPropagation).toHaveBeenCalledTimes(0);
       });
 
-      it('stopPropagation is not called for Escape', () => {
-        let {inputProps} = renderSearchHook({});
-        inputProps.onKeyDown(event('Escape'));
-        expect(stopPropagation).toHaveBeenCalledTimes(0);
+      it('preventDefault is not called for Enter if onSubmit is not provided', () => {
+        let {inputProps} = renderSearchHook();
+        inputProps.onKeyDown(event('Enter'));
+        expect(preventDefault).toHaveBeenCalledTimes(0);
       });
 
-      it('onSubmit is called if Enter is pressed', () => {
+      it('preventDefault and onSubmit are called for Enter if submit is provided', () => {
         let {inputProps} = renderSearchHook({onSubmit});
         inputProps.onKeyDown(event('Enter'));
         expect(onSubmit).toHaveBeenCalledTimes(1);