Closing a Dialog with the default "x" icon triggers onSubmit()

[joeyamst]

Describe the issue

When closing a Dialog with the default "x" icon, the onSubmit() hook that is given as prop to the Dialog will trigger. This is unwanted because the form in my dialog gets submitted without the user wanting to submit it.

Summary

The Dialog component contains a <form>. When I create a Dialog and give it a onSubmit() prop, this function will be triggered when I press the "x" icon.

Steps to reproduce

(Provide a clear and concise list of steps to reproduce the issue.)

1. Create a Dialog that can be opened with a button
2. Give the dialog a prop onSubmit() with some logging code
3. Close the dialog with the standard provided "x" icon.
4. Observe that the onSubmit() function is triggered

Here's a link to a codesandbox: https://codesandbox.io/p/devbox/muddy-forest-n9h9lt?workspaceId=5bdd83a2-36b4-4d1b-acb9-544b42f5ece6

Environment

• Browser: Chrome and Firefox
• Operating System: Windows
• Version of the design system: v0.11.0

Checklist

Before submitting your issue, please ensure you have done the following:

• Search the issue tracker to ensure the issue has not already been reported.
• Verify that the issue can be consistently reproduced.
• Check if the issue is already documented.

Additional notes

It is probably due to how <form method="dialog"> handles the closing of a dialog, seeing it as a submit.

[VincentSmedinga]

Hi @joeyamst, thanks for reporting. That certainly looks like a bug. We will look into it and report back. The link to the CodeSandbox leads to a 404 for me, but we can probably reproduce without it.

[joeyamst]

@VincentSmedinga Not sure why you get the 404. It is indeed easy to reproduce:

import { useState } from "react";
import { Button, Dialog } from "@amsterdam/design-system-react";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setOpen(true);
        }}
      >
        Klik
      </Button>
      <Dialog
        heading="Dialog Heading"
        id="Id"
        open={open}
        onSubmit={() => {
          console.log("Submit");
          setOpen(false);
        }}
      >
        Dialog Text
      </Dialog>
    </>
  );
}

export default App;

The log "Submit" triggers when closing the Dialog with the "x" icon.

[VincentSmedinga]

@joeyamst Me neither – I registered with GitHub and added additional authorization scopes, but I’m unfamiliar with that site. No worries.

We’re well underway with a solution in the PR mentioned above. I’ve just invited you to add your feedback, if any.

[VincentSmedinga]

@joeyamst We’ve just released @amsterdam/design-system-react v0.11.1 to address this. The close button now calls the dialog’s close method instead of submitting its form. We also offer new openDialog and closeDialog functions.

No changes on your side are necessary. Please let us know whether this indeed resolves the problem.

[joeyamst]

@VincentSmedinga After upgrading to 0.11.1 I can confirm the onSubmit() does not get triggered on closing the dialog. Thanks for the quick response!