Prevent default when the submit button is clicked while isPending is true (#6209)

* Prevent default when the submit button is clicked while isPending is true

* prevent default for all button types

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>

Author: 3 people

packages/@react-spectrum/button/src/Button.tsx

@@ -114,11 +114,24 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {
     ariaLive = 'off';
   }
+
+  let isPendingProps = isPending ? {
+    onClick: (e) => {
+      if (e.currentTarget instanceof HTMLButtonElement) {
+        e.preventDefault();
+      }
+    }
+  } : {
+    // no-op. 
+    // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
+    onClick: () => {}
+  };
+
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
       <Element
         {...styleProps}
-        {...mergeProps(buttonProps, hoverProps, focusProps)}
+        {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}
         id={buttonId}
         ref={domRef}
         data-variant={variant}

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -16,6 +16,7 @@ import Bell from '@spectrum-icons/workflow/Bell';
 import {Button} from '../';
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
+import {Form} from '@react-spectrum/form';
 import React, {ElementType, useState} from 'react';
 import {SpectrumButtonProps} from '@react-types/button';
 import {Text} from '@react-spectrum/text';
@@ -345,6 +346,14 @@ function Pending(props) {
           </Button>
         </PendingButtonContainerComponent>
       </Flex>
+
+      <Flex wrap="wrap" alignItems={'center'}>
+        <PendingButtonContainerComponent {...props}>
+          <PendingButtonFormComponent {...props} type="submit">
+            Form submit
+          </PendingButtonFormComponent>
+        </PendingButtonContainerComponent>
+      </Flex>
     </div>
   );
 }
@@ -390,3 +399,28 @@ function PendingButtonOnClickComponent(props) {
     </Button>
   );
 }
+
+function PendingButtonFormComponent(props) {
+  let [isPending, setPending] = useState(false);
+
+  let onSubmit = (e) => {
+    console.log('onSubmit called.');
+    e.preventDefault();
+    if (!isPending) {
+      setPending(true);
+      setTimeout(() => {
+        setPending(false);
+      }, timerValue);
+    }
+  };
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Button
+        {...props}
+        isPending={isPending}>
+        {props.children}
+      </Button>
+    </Form>
+  );
+}