fix: disable form submission for isPending (#7498)

* fix: disable form submission for isPending

* fix lint

* fix earlier react versions for tests

* fix early react version tests

* remove extra element

* simplify further

* make diff smaller

* fix code comment

* fix lint

Author: snowystinger

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

@@ -157,11 +157,14 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
     wasPending.current = isPending;
   }, [isPending, isFocused, ariaLabelledby, buttonId]);
 
+  // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
+  // We do this by changing the button's type to button.
   return (
     <button
       {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}
       {...mergeProps(buttonProps, focusProps, hoverProps)}
       {...renderProps}
+      type={buttonProps.type === 'submit' && isPending ? 'button' : buttonProps.type}
       id={buttonId}
       ref={ref}
       aria-labelledby={ariaLabelledby}

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

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, fireEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import {Button, ButtonContext, ProgressBar, Text} from '../';
-import {fireEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React, {useState} from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -21,6 +21,10 @@ describe('Button', () => {
     user = userEvent.setup({delay: null, pointerMap});
     jest.useFakeTimers();
   });
+  afterEach(() => {
+    // clear any live announcers from pending buttons
+    act(() => jest.runAllTimers());
+  });
 
   it('should render a button with default class', () => {
     let {getByRole} = render(<Button>Test</Button>);
@@ -197,4 +201,147 @@ describe('Button', () => {
     let button = getByRole('button');
     expect(button).not.toHaveAttribute('href');
   });
+
+  it('should prevent explicit mouse form submission when isPending', async function () {
+    let onSubmitSpy = jest.fn(e => e.preventDefault());
+    function TestComponent() {
+      let [pending, setPending] = useState(false);
+      return (
+        <Button
+          type="submit"
+          onPress={() => {
+            // immediately setting pending to true will remove the click handler before the form is submitted
+            setTimeout(() => {
+              setPending(true);
+            }, 0);
+          }}
+          isPending={pending}>
+          {({isPending}) => (
+            <>
+              <Text style={{opacity: isPending ? '0' : undefined}}>Test</Text>
+              <ProgressBar
+                aria-label="loading"
+                style={{opacity: isPending ? undefined : '0'}}
+                isIndeterminate>
+                loading
+              </ProgressBar>
+            </>
+          )}
+        </Button>
+      );
+    }
+    let {getByRole} = render(
+      <form onSubmit={onSubmitSpy}>
+        <TestComponent />
+      </form>
+    );
+    let button = getByRole('button');
+    expect(button).not.toHaveAttribute('aria-disabled');
+
+    await user.click(button);
+    expect(onSubmitSpy).toHaveBeenCalled();
+    onSubmitSpy.mockClear();
+
+    // run timer to set pending
+    act(() => jest.runAllTimers());
+
+    await user.click(button);
+    expect(onSubmitSpy).not.toHaveBeenCalled();
+  });
+
+  it('should prevent explicit keyboard form submission when isPending', async function () {
+    let onSubmitSpy = jest.fn(e => e.preventDefault());
+    function TestComponent() {
+      let [pending, setPending] = useState(false);
+      return (
+        <Button
+          type="submit"
+          onPress={() => {
+            // immediately setting pending to true will remove the click handler before the form is submitted
+            setTimeout(() => {
+              setPending(true);
+            }, 0);
+          }}
+          isPending={pending}>
+          {({isPending}) => (
+            <>
+              <Text style={{opacity: isPending ? '0' : undefined}}>Test</Text>
+              <ProgressBar
+                aria-label="loading"
+                style={{opacity: isPending ? undefined : '0'}}
+                isIndeterminate>
+                loading
+              </ProgressBar>
+            </>
+          )}
+        </Button>
+      );
+    }
+    render(
+      <form onSubmit={onSubmitSpy}>
+        <TestComponent />
+      </form>
+    );
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(onSubmitSpy).toHaveBeenCalled();
+    onSubmitSpy.mockClear();
+    act(() => jest.runAllTimers());
+
+    await user.keyboard('{Enter}');
+    expect(onSubmitSpy).not.toHaveBeenCalled();
+  });
+
+  // Note: two inputs are needed, otherwise https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#implicit-submission
+  // Implicit form submission can happen if there's only one.
+  it('should prevent implicit form submission when isPending', async function () {
+    let onSubmitSpy = jest.fn(e => e.preventDefault());
+    function TestComponent(props) {
+      let [pending, setPending] = useState(false);
+      return (
+        <form
+          onSubmit={(e) => {
+            // forms are submitted implicitly on keydown, so we need to wait to set pending until after to set pending
+            props.onSubmit(e);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              // keyup could theoretically happen elsewhere if focus is moved during submission
+              document.body.addEventListener('keyup', () => {
+                setPending(true);
+              }, {capture: true, once: true});
+            }
+          }}>
+          <label htmlFor="foo">Test</label>
+          <input id="foo" type="text" />
+          <input id="bar" type="text" />
+          <Button
+            type="submit"
+            isPending={pending}>
+            {({isPending}) => (
+              <>
+                <Text style={{opacity: isPending ? '0' : undefined}}>Test</Text>
+                <ProgressBar
+                  aria-label="loading"
+                  style={{opacity: isPending ? undefined : '0'}}
+                  isIndeterminate>
+                  loading
+                </ProgressBar>
+              </>
+            )}
+          </Button>
+        </form>
+      );
+    }
+    render(
+      <TestComponent onSubmit={onSubmitSpy} />
+    );
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(onSubmitSpy).toHaveBeenCalled();
+    onSubmitSpy.mockClear();
+
+    await user.keyboard('{Enter}');
+    expect(onSubmitSpy).not.toHaveBeenCalled();
+  });
 });