fix(Modal): prevent double submit on primary button enter key (#19151)

Author: adamalston

packages/react/src/components/Modal/Modal-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -725,4 +725,28 @@ describe('events', () => {
     await userEvent.click(secondaryBtn);
     expect(onSecondarySubmit).toHaveBeenCalled();
   });
+
+  it('should not double submit when Enter key is pressed on primary button with `shouldSubmitOnEnter` enabled', async () => {
+    const { keyboard } = userEvent;
+    const onRequestSubmit = jest.fn();
+
+    render(
+      <Modal
+        open
+        primaryButtonText="Submit"
+        secondaryButtonText="Cancel"
+        onRequestSubmit={onRequestSubmit}
+        shouldSubmitOnEnter>
+        <p>Test content</p>
+      </Modal>
+    );
+
+    const primaryButton = screen.getByRole('button', { name: 'Submit' });
+
+    primaryButton.focus();
+    expect(primaryButton).toHaveFocus();
+
+    await keyboard('{Enter}');
+    expect(onRequestSubmit).toHaveBeenCalledTimes(1);
+  });
 });

packages/react/src/components/Modal/Modal.stories.js

@@ -743,3 +743,87 @@ export const withAILabel = {
     );
   },
 };
+
+export const Test1 = () => {
+  const [showModal, setShowModal] = useState();
+
+  const submit = () => {
+    console.log('*** i was clicked.');
+    setShowModal(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={() => setShowModal(true)}>Click me to show modal</Button>
+      <Modal
+        modalHeading="Double submit bug"
+        open={showModal}
+        secondaryButtonText="Cancel"
+        primaryButtonText="Focus on me and enter"
+        onRequestSubmit={submit}
+        danger
+        shouldSubmitOnEnter>
+        <div>Submit with enter</div>
+      </Modal>
+    </div>
+  );
+};
+
+/**
+ * Simple state manager for modals.
+ */
+const ModalStateManager = ({
+  renderLauncher: LauncherContent,
+  children: ModalContent,
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      {!ModalContent || typeof document === 'undefined'
+        ? null
+        : ReactDOM.createPortal(
+            <ModalContent open={open} setOpen={setOpen} />,
+            document.body
+          )}
+      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
+    </>
+  );
+};
+
+export const Test2 = () => {
+  const button = React.useRef();
+
+  return (
+    <ModalStateManager
+      renderLauncher={({ setOpen }) => (
+        <Button ref={button} onClick={() => setOpen(true)} kind="danger">
+          Launch danger modal
+        </Button>
+      )}>
+      {({ open, setOpen }) => (
+        <Modal
+          danger
+          launcherButtonRef={button}
+          modalHeading="Delete"
+          primaryButtonText="Delete"
+          secondaryButtonText="Cancel"
+          open={open}
+          onRequestClose={() => setOpen(false)}
+          shouldSubmitOnEnter
+          onRequestSubmit={() => console.log('Delete called.')}>
+          <p style={{ marginBottom: '1rem' }}>
+            Are you sure you want to delete?
+          </p>
+          <TextInput
+            data-modal-primary-focus
+            id="text-input-1"
+            labelText="Confirm deletion"
+            placeholder="Type 'Confirm' to delete"
+            style={{ marginBottom: '1rem' }}
+          />
+        </Modal>
+      )}
+    </ModalStateManager>
+  );
+};

packages/react/src/components/Modal/Modal.tsx

@@ -309,7 +309,10 @@ const Modal = React.forwardRef(function Modal(
   }
 
   function handleKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
+    const { target } = evt;
+
     evt.stopPropagation();
+
     if (open) {
       if (match(evt, keys.Escape)) {
         onRequestClose(evt);
@@ -318,7 +321,9 @@ const Modal = React.forwardRef(function Modal(
       if (
         match(evt, keys.Enter) &&
         shouldSubmitOnEnter &&
-        !isCloseButton(evt.target as Element)
+        target instanceof Element &&
+        !isCloseButton(target) &&
+        document.activeElement !== button.current
       ) {
         onRequestSubmit(evt);
       }