Allow async event handler in <Form onSubmit>

[ProchaLu]

Discussion #66505 (reply in thread)

This PR allows passing in async event handler for onSubmit.

cc @eps1lon

Please fill in this template.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code. (Compile and run.)
• Add or edit tests to reflect the change.
• Follow the advice from the readme.
• Avoid common mistakes.
• Run pnpm test <package to test>.

Select one of these and delete the others:

If adding a new definition:

• The package does not already provide its own types, or cannot have its .d.ts files generated via --declaration
• If this is for an npm package, match the name. If not, do not conflict with the name of an npm package.
• Create it with dts-gen --dt, not by basing it on an existing project.
• Represents shape of module/library correctly
• tsconfig.json should have noImplicitAny, noImplicitThis, strictNullChecks, and strictFunctionTypes set to true.

If changing an existing definition:

• Provide a URL to documentation or source code which provides context for the suggested changes: [@types/react] `<Form onSubmit>` should allow an async event handler #66505 (reply in thread)
  Playground

[typescript-bot]

@ProchaLu Thank you for submitting this PR! I see this is your first time submitting to DefinitelyTyped 👋 — I'm the local bot who will help you through the process of getting things through.

This is a live comment that I will keep updated.

1 package in this PR

• react — on npm, on unpkg

Code Reviews

Because this is a widely-used package, a DT maintainer will need to review it before it can be merged.

You can test the changes of this PR in the Playground.

Status

• ✅ No merge conflicts
• ❌ Continuous integration tests have failed
• 🕐 Only a DT maintainer can approve changes without tests

Once every item on this list is checked, I'll ask you for permission to merge and publish the changes.

Inactive

This PR has been inactive for 7 days.

---

Diagnostic Information: What the bot saw about this PR

{
  "type": "info",
  "now": "-",
  "pr_number": 70086,
  "author": "ProchaLu",
  "headCommitOid": "07880a74014228262d42f97346fbdb05a055f608",
  "mergeBaseOid": "66fe40c5267f780ad9718e534e478e2badadd9f7",
  "lastPushDate": "2024-07-18T08:10:09.000Z",
  "lastActivityDate": "2024-08-14T18:19:44.000Z",
  "hasMergeConflict": false,
  "isFirstContribution": true,
  "tooManyFiles": false,
  "hugeChange": false,
  "popularityLevel": "Critical",
  "pkgInfo": [
    {
      "name": "react",
      "kind": "edit",
      "files": [
        {
          "path": "types/react/index.d.ts",
          "kind": "definition"
        }
      ],
      "owners": [
        "johnnyreilly",
        "bbenezech",
        "pzavolinsky",
        "ericanderson",
        "DovydasNavickas",
        "theruther4d",
        "guilhermehubner",
        "ferdaber",
        "jrakotoharisoa",
        "pascaloliv",
        "hotell",
        "franklixuefei",
        "Jessidhia",
        "saranshkataria",
        "lukyth",
        "eps1lon",
        "zieka",
        "dancerphil",
        "dimitropoulos",
        "disjukr",
        "vhfmag",
        "hellatan",
        "priyanshurav",
        "Semigradsky",
        "mattpocock"
      ],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Critical"
    }
  ],
  "reviews": [],
  "mainBotCommentID": 2235895040,
  "ciResult": "fail",
  "ciUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/commit/07880a74014228262d42f97346fbdb05a055f608/checks?check_suite_id=26144406227"
}

[typescript-bot]

🔔 @johnnyreilly @bbenezech @pzavolinsky @ericanderson @DovydasNavickas @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @Hotell @franklixuefei @Jessidhia @saranshkataria @lukyth @eps1lon @zieka @dancerphil @dimitropoulos @disjukr @vhfmag @hellatan @priyanshurav @Semigradsky @mattpocock — please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

[typescript-bot]

@ProchaLu The CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

Note: builds that are failing do not end up on the list of PRs for the DT maintainers to review.

[eps1lon]

Looks like we'd have to write a codemod now to ensure all event handlers are void:

-<button onClick={() => returnSomethingOtherThanVoid()} />
+<button onClick={() => {returnSomethingOtherThanVoid()}} />

That's the same we did for ref (see no-implicit-ref-callback-return) but now it's considerably more involved since we now have to come up with a heuristic to detect event handlers.

[karlhorky]

Looks like we'd have to write a codemod now to ensure all event handlers are void

Oh, wouldn't this have already been a problem before with the void return type?

Or does changing the event handler return type from void to void | Promise<void> somehow trigger extra strictness on the existing void?

[eps1lon]

Or does changing the event handler return type from void to void | Promise somehow trigger extra strictness on the existing void?

Yes. TypeScript does not care if you pass () => number as an argument to a function accepting () => void as a parameter.

[karlhorky]

Wow TIL about TypeScript, super interesting!

function acceptEventHandler(eventHandler: () => void) {}

acceptEventHandler(() => 1)

function acceptEventHandlerWithAsyncFunction(eventHandler: () => void | Promise<void>) {}

acceptEventHandlerWithAsyncFunction(() => 1) // Type 'number' is not assignable to type 'void | Promise<void>'.(2322)

Playground

[typescript-bot]

@ProchaLu I haven't seen any activity on this PR in more than three weeks, and it still has problems that prevent it from being merged. The PR will be closed on Aug 21st (in a week) if the issues aren't addressed.

[ProchaLu]

@eps1lon @rickhanlonii, I wanted to follow up on this PR which adds support for async event handlers in onSubmit, as we discussed in #66505.

@eps1lon mentioned that the team was discussing the potential pitfalls, like the issues with event.stopPropagation or event.preventDefault when using await. Has there been any progress on these discussions, or any decisions on whether this change will be accepted?

[eps1lon]

Part of the team was out so we didn't have time to discuss it yet.

[ProchaLu]

Closed

React decided not to allow async functions at the type level in event handlers like <Form onSubmit>. They considering adding runtime warnings when returning a Promise from an event handler, explained in this comment