Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatically reset forms after action finishes #28804

Merged
merged 1 commit into from
Apr 10, 2024

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Apr 10, 2024

This updates the behavior of form actions to automatically reset the form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it aligns the behavior of client-side form submissions more closely with MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you called form.reset() manually, except React handles the timing of when the reset happens, which is tricky/impossible to get exactly right in userspace.

The reset shouldn't happen until the UI has updated with the result of the action. So, resetting inside the action is too early.

Resetting in useEffect is better, but it's later than ideal because any effects that run before it will observe the state of the form before it's been reset.

It needs to happen in the mutation phase of the transition. More specifically, after all the DOM mutations caused by the transition have been applied. That way the defaultValue of the inputs are updated before the values are reset. The idea is that the defaultValue represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't triggered by an action.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 10, 2024
@react-sizebot
Copy link

react-sizebot commented Apr 10, 2024

Comparing: ed3c65c...562f9c9

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.27% 168.12 kB 168.57 kB +0.24% 52.72 kB 52.85 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.26% 169.92 kB 170.37 kB +0.20% 53.26 kB 53.37 kB
facebook-www/ReactDOM-prod.classic.js +0.22% 589.57 kB 590.89 kB +0.22% 103.80 kB 104.03 kB
facebook-www/ReactDOM-prod.modern.js +0.23% 565.41 kB 566.73 kB +0.23% 99.93 kB 100.16 kB
test_utils/ReactAllWarnings.js Deleted 64.24 kB 0.00 kB Deleted 16.03 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.js +0.49% 665.84 kB 669.08 kB +0.51% 146.23 kB 146.97 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.js +0.49% 665.86 kB 669.11 kB +0.51% 146.26 kB 147.01 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.js +0.48% 672.88 kB 676.12 kB +0.53% 147.79 kB 148.57 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.48% 908.86 kB 913.24 kB +0.53% 195.30 kB 196.34 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.48% 908.89 kB 913.27 kB +0.53% 195.33 kB 196.37 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.48% 918.20 kB 922.58 kB +0.53% 197.14 kB 198.19 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.js +0.46% 705.86 kB 709.10 kB +0.50% 153.52 kB 154.29 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.js +0.46% 705.89 kB 709.13 kB +0.50% 153.55 kB 154.31 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.js +0.46% 712.90 kB 716.14 kB +0.49% 155.11 kB 155.88 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.min.js +0.43% 108.56 kB 109.03 kB +0.39% 33.85 kB 33.98 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.min.js +0.43% 108.59 kB 109.06 kB +0.39% 33.87 kB 34.00 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js +0.42% 110.35 kB 110.82 kB +0.37% 34.47 kB 34.60 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.min.js +0.40% 117.42 kB 117.89 kB +0.32% 36.09 kB 36.21 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.min.js +0.40% 117.45 kB 117.92 kB +0.33% 36.11 kB 36.23 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js +0.39% 119.21 kB 119.67 kB +0.41% 36.65 kB 36.80 kB
oss-stable-semver/react-dom/cjs/react-dom.production.js +0.35% 919.85 kB 923.06 kB +0.37% 206.89 kB 207.65 kB
oss-stable/react-dom/cjs/react-dom.production.js +0.35% 919.87 kB 923.08 kB +0.37% 206.92 kB 207.68 kB
oss-experimental/react-dom/cjs/react-dom.production.js +0.35% 926.94 kB 930.15 kB +0.37% 208.43 kB 209.20 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.js +0.34% 945.18 kB 948.39 kB +0.36% 212.95 kB 213.71 kB
oss-stable-semver/react-dom/cjs/react-dom.development.js +0.34% 1,293.34 kB 1,297.68 kB +0.37% 286.49 kB 287.55 kB
oss-stable/react-dom/cjs/react-dom.development.js +0.34% 1,293.36 kB 1,297.71 kB +0.37% 286.52 kB 287.58 kB
oss-stable-semver/react-dom/umd/react-dom.development.js +0.34% 1,356.09 kB 1,360.63 kB +0.38% 289.40 kB 290.49 kB
oss-stable/react-dom/umd/react-dom.development.js +0.34% 1,356.12 kB 1,360.66 kB +0.38% 289.43 kB 290.52 kB
oss-stable-semver/react-dom/cjs/react-dom.profiling.js +0.33% 960.46 kB 963.67 kB +0.35% 214.16 kB 214.92 kB
oss-stable/react-dom/cjs/react-dom.profiling.js +0.33% 960.48 kB 963.69 kB +0.35% 214.19 kB 214.95 kB
oss-experimental/react-dom/cjs/react-dom.development.js +0.33% 1,302.73 kB 1,307.08 kB +0.37% 288.32 kB 289.39 kB
oss-experimental/react-dom/umd/react-dom.development.js +0.33% 1,365.97 kB 1,370.51 kB +0.36% 291.21 kB 292.26 kB
oss-experimental/react-dom/cjs/react-dom.profiling.js +0.33% 967.55 kB 970.76 kB +0.35% 215.71 kB 216.46 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.33% 1,321.15 kB 1,325.50 kB +0.37% 292.77 kB 293.84 kB
facebook-www/ReactDOM-dev.modern.js +0.30% 1,621.20 kB 1,626.01 kB +0.34% 322.53 kB 323.63 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.29% 1,644.60 kB 1,649.41 kB +0.34% 327.14 kB 328.26 kB
facebook-www/ReactDOM-dev.classic.js +0.29% 1,673.24 kB 1,678.05 kB +0.34% 331.38 kB 332.50 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.28% 1,697.92 kB 1,702.73 kB +0.33% 336.19 kB 337.31 kB
oss-stable-semver/react-dom/umd/react-dom.production.min.js +0.27% 167.79 kB 168.24 kB +0.28% 53.04 kB 53.19 kB
oss-stable/react-dom/umd/react-dom.production.min.js +0.27% 167.87 kB 168.32 kB +0.28% 53.07 kB 53.22 kB
oss-stable-semver/react-dom/cjs/react-dom.production.min.js +0.27% 168.04 kB 168.49 kB +0.24% 52.69 kB 52.82 kB
oss-stable/react-dom/cjs/react-dom.production.min.js +0.27% 168.12 kB 168.57 kB +0.24% 52.72 kB 52.85 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +0.27% 169.67 kB 170.13 kB +0.25% 53.70 kB 53.83 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.26% 169.92 kB 170.37 kB +0.20% 53.26 kB 53.37 kB
oss-stable-semver/react-dom/umd/react-dom.profiling.min.js +0.25% 176.63 kB 177.08 kB +0.21% 55.45 kB 55.56 kB
oss-stable/react-dom/umd/react-dom.profiling.min.js +0.25% 176.71 kB 177.16 kB +0.21% 55.47 kB 55.59 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.min.js +0.25% 176.86 kB 177.31 kB +0.20% 55.85 kB 55.97 kB
oss-stable-semver/react-dom/cjs/react-dom.profiling.min.js +0.25% 177.32 kB 177.77 kB +0.22% 55.14 kB 55.26 kB
oss-stable/react-dom/cjs/react-dom.profiling.min.js +0.25% 177.40 kB 177.85 kB +0.22% 55.16 kB 55.28 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +0.25% 178.51 kB 178.96 kB +0.25% 56.01 kB 56.15 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +0.25% 179.21 kB 179.66 kB +0.25% 55.71 kB 55.85 kB
facebook-www/ReactDOM-prod.modern.js +0.23% 565.41 kB 566.73 kB +0.23% 99.93 kB 100.16 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.23% 581.36 kB 582.67 kB +0.22% 103.88 kB 104.11 kB
facebook-www/ReactDOM-prod.classic.js +0.22% 589.57 kB 590.89 kB +0.22% 103.80 kB 104.03 kB
facebook-www/ReactDOM-profiling.modern.js +0.22% 594.31 kB 595.63 kB +0.22% 104.07 kB 104.29 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.22% 604.22 kB 605.54 kB +0.21% 107.51 kB 107.74 kB
facebook-www/ReactDOM-profiling.classic.js +0.21% 619.11 kB 620.43 kB +0.22% 108.10 kB 108.33 kB
test_utils/ReactAllWarnings.js Deleted 64.24 kB 0.00 kB Deleted 16.03 kB 0.00 kB

Generated by 🚫 dangerJS against 562f9c9

@acdlite acdlite force-pushed the automatically-reset-forms branch 2 times, most recently from 5e8fad4 to 41e6173 Compare April 10, 2024 00:38
@acdlite acdlite marked this pull request as ready for review April 10, 2024 00:41
// data sent by the server as a result of the form submission.
//
// Theoretically we could check finishedWork.subtreeFlags & FormReset,
// but the FormReset bit is overloaded with other flags used by other
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should start a campaign for javascript64

acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right
in userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
const newResetState = {};
const resetStateHook: Hook = (formFiber.memoizedState.next: any);
const resetStateQueue = resetStateHook.queue;
dispatchSetState(formFiber, resetStateQueue, newResetState);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this actually have to be on the Fiber?

Can't it just be scheduled on the Root with a list of forms to reset when the root commits?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That way you don't need all the special commit phase stuff.

Copy link
Collaborator Author

@acdlite acdlite Apr 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I'll need to think more about that, the scenario I had in mind was if the form is inside a Suspense boundary, the root could commit before the input's defaultValue had been updated. Usually this shouldn't happen because during a Transition we won't hide already visible forms, but during a popstate transition we might.

The <input form="myform"> case is interesting there, too.

@acdlite acdlite merged commit 41950d1 into facebook:main Apr 10, 2024
38 checks passed
acdlite added a commit that referenced this pull request Apr 10, 2024
Based on:

- #28804 

---

This sets adds a new ReactDOM export called requestFormReset, including
setting up the export and creating a method on the internal ReactDOM
dispatcher. It does not yet add any implementation.

Doing this in its own commit for review purposes.

The API itself will be explained in the next PR.
acdlite added a commit to acdlite/react that referenced this pull request Apr 10, 2024
This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever
a form action is submitted. It only affects uncontrolled form inputs.
See facebook#28804 for details.

The reason for the public API is so UI libraries can implement their
own action-based APIs and maintain the form-resetting behavior,
something like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
acdlite added a commit that referenced this pull request Apr 10, 2024
Based on:

- #28808
- #28804 

---

This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a
form action is submitted. It only affects uncontrolled form inputs. See
#28804 for details.

The reason for the public API is so UI libraries can implement their own
action-based APIs and maintain the form-resetting behavior, something
like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
github-actions bot pushed a commit that referenced this pull request Apr 10, 2024
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right in
userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.

DiffTrain build for [41950d1](41950d1)
github-actions bot pushed a commit that referenced this pull request Apr 10, 2024
Based on:

- #28804

---

This sets adds a new ReactDOM export called requestFormReset, including
setting up the export and creating a method on the internal ReactDOM
dispatcher. It does not yet add any implementation.

Doing this in its own commit for review purposes.

The API itself will be explained in the next PR.

DiffTrain build for [374b5d2](374b5d2)
github-actions bot pushed a commit that referenced this pull request Apr 10, 2024
Based on:

- #28808
- #28804

---

This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a
form action is submitted. It only affects uncontrolled form inputs. See
#28804 for details.

The reason for the public API is so UI libraries can implement their own
action-based APIs and maintain the form-resetting behavior, something
like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```

DiffTrain build for [da69b6a](da69b6a)
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right in
userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
Based on:

- #28804 

---

This sets adds a new ReactDOM export called requestFormReset, including
setting up the export and creating a method on the internal ReactDOM
dispatcher. It does not yet add any implementation.

Doing this in its own commit for review purposes.

The API itself will be explained in the next PR.
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
Based on:

- #28808
- #28804 

---

This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a
form action is submitted. It only affects uncontrolled form inputs. See
#28804 for details.

The reason for the public API is so UI libraries can implement their own
action-based APIs and maintain the form-resetting behavior, something
like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right in
userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
Based on:

- #28804 

---

This sets adds a new ReactDOM export called requestFormReset, including
setting up the export and creating a method on the internal ReactDOM
dispatcher. It does not yet add any implementation.

Doing this in its own commit for review purposes.

The API itself will be explained in the next PR.
rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024
Based on:

- #28808
- #28804 

---

This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a
form action is submitted. It only affects uncontrolled form inputs. See
#28804 for details.

The reason for the public API is so UI libraries can implement their own
action-based APIs and maintain the form-resetting behavior, something
like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right in
userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Based on:

- facebook#28804 

---

This sets adds a new ReactDOM export called requestFormReset, including
setting up the export and creating a method on the internal ReactDOM
dispatcher. It does not yet add any implementation.

Doing this in its own commit for review purposes.

The API itself will be explained in the next PR.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Based on:

- facebook#28808
- facebook#28804 

---

This adds a React DOM method called requestFormReset that schedules a
form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a
form action is submitted. It only affects uncontrolled form inputs. See
facebook#28804 for details.

The reason for the public API is so UI libraries can implement their own
action-based APIs and maintain the form-resetting behavior, something
like this:

```js
function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}
```
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
This updates the behavior of form actions to automatically reset the
form's uncontrolled inputs after the action finishes.

This is a frequent feature request for people using actions and it
aligns the behavior of client-side form submissions more closely with
MPA form submissions.

It has no impact on controlled form inputs. It's the same as if you
called `form.reset()` manually, except React handles the timing of when
the reset happens, which is tricky/impossible to get exactly right in
userspace.

The reset shouldn't happen until the UI has updated with the result of
the action. So, resetting inside the action is too early.

Resetting in `useEffect` is better, but it's later than ideal because
any effects that run before it will observe the state of the form before
it's been reset.

It needs to happen in the mutation phase of the transition. More
specifically, after all the DOM mutations caused by the transition have
been applied. That way the `defaultValue` of the inputs are updated
before the values are reset. The idea is that the `defaultValue`
represents the current, canonical value sent by the server.

Note: this change has no effect on form submissions that aren't
triggered by an action.

DiffTrain build for commit 41950d1.
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 19, 2024
Summary:
This sync includes the changes from:
- D56103750
- [TODO] A shim for SECRET_INTERNALS

This sync includes the following changes:
- **[b5e5ce8e0](facebook/react@b5e5ce8e0 )**: Update ReactNativeTypes for root options (part 2) ([#28857](facebook/react#28857)) //<Ricky>//
- **[da6ba53b1](facebook/react@da6ba53b1 )**: [UMD] Remove umd builds ([#28735](facebook/react#28735)) //<Josh Story>//
- **[0c245df1d](facebook/react@0c245df1d )**: Complete the typo fix ([#28856](facebook/react#28856)) //<Sebastian Silbermann>//
- **[f82051d7a](facebook/react@f82051d7a )**: console test utils fix: match entire string, not just first letter ([#28855](facebook/react#28855)) //<Andrew Clark>//
- **[4ca20fd36](facebook/react@4ca20fd36 )**: Test top level fragment inside lazy semantics ([#28852](facebook/react#28852)) //<Sebastian Markbåge>//
- **[c0cf7c696](facebook/react@c0cf7c696 )**: Promote ASYNC_ITERATOR symbol to React Symbols ([#28851](facebook/react#28851)) //<Sebastian Markbåge>//
- **[657428a9e](facebook/react@657428a9e )**: Add ReactNativeTypes for root options ([#28850](facebook/react#28850)) //<Ricky>//
- **[7909d8eab](facebook/react@7909d8eab )**: [Flight] Encode ReadableStream and AsyncIterables ([#28847](facebook/react#28847)) //<Sebastian Markbåge>//
- **[13eb61d05](facebook/react@13eb61d05 )**: Move enableUseDeferredValueInitialArg to canary ([#28818](facebook/react#28818)) //<Andrew Clark>//
- **[8afa144bd](facebook/react@8afa144bd )**: Enable flag disableClientCache ([#28846](facebook/react#28846)) //<Jan Kassens>//
- **[734956ace](facebook/react@734956ace )**: Devtools: Add support for useFormStatus ([#28413](facebook/react#28413)) //<Sebastian Silbermann>//
- **[17e920c00](facebook/react@17e920c00 )**: [Flight Reply] Encode Typed Arrays and Blobs ([#28819](facebook/react#28819)) //<Sebastian Markbåge>//
- **[0347fcd00](facebook/react@0347fcd00 )**: Add on(Caught|Uncaught|Recoverable) opts to RN ([#28836](facebook/react#28836)) //<Ricky>//
- **[c113503ad](facebook/react@c113503ad )**: Flush direct streams in Bun ([#28837](facebook/react#28837)) //<Kenta Iwasaki>//
- **[9defcd56b](facebook/react@9defcd56b )**: Remove redundant props assign ([#28829](facebook/react#28829)) //<Sebastian Silbermann>//
- **[ed4023603](facebook/react@ed4023603 )**: Fix mistaken "react-server" condition ([#28835](facebook/react#28835)) //<Sebastian Markbåge>//
- **[c8a035036](facebook/react@c8a035036 )**: [Fizz] hoistables should never flush before the preamble ([#28802](facebook/react#28802)) //<Josh Story>//
- **[4f5c812a3](facebook/react@4f5c812a3 )**: DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions ([#28593](facebook/react#28593)) //<Sebastian Silbermann>//
- **[435415962](facebook/react@435415962 )**: Backwards compatibility for string refs on WWW ([#28826](facebook/react#28826)) //<Jack Pope>//
- **[608edcc90](facebook/react@608edcc90 )**: [tests] add `assertConsole<method>Dev` helpers ([#28732](facebook/react#28732)) //<Ricky>//
- **[da69b6af9](facebook/react@da69b6af9 )**: ReactDOM.requestFormReset  ([#28809](facebook/react#28809)) //<Andrew Clark>//
- **[374b5d26c](facebook/react@374b5d26c )**: Scaffolding for requestFormReset API ([#28808](facebook/react#28808)) //<Andrew Clark>//
- **[41950d14a](facebook/react@41950d14a )**: Automatically reset forms after action finishes ([#28804](facebook/react#28804)) //<Andrew Clark>//
- **[dc6a7e01e](facebook/react@dc6a7e01e )**: [Float] Don't preload images inside `<noscript>` ([#28815](facebook/react#28815)) //<Josh Story>//
- **[3f947b1b4](facebook/react@3f947b1b4 )**: [tests] Assert scheduler log empty in internalAct ([#28737](facebook/react#28737)) //<Ricky>//
- **[bf09089f6](facebook/react@bf09089f6 )**: Remove Scheduler.log from ReactSuspenseFuzz-test ([#28812](facebook/react#28812)) //<Ricky>//
- **[84cb3b4cb](facebook/react@84cb3b4cb )**: Hardcode disableIEWorkarounds for www ([#28811](facebook/react#28811)) //<Ricky>//
- **[2243b40ab](facebook/react@2243b40ab )**: [tests] assertLog before act in useEffectEvent ([#28763](facebook/react#28763)) //<Ricky>//
- **[dfc64c6e3](facebook/react@dfc64c6e3 )**: [tests] assertLog before act in ReactUse ([#28762](facebook/react#28762)) //<Ricky>//
- **[42eff4bc7](facebook/react@42eff4bc7 )**: [tests] Fix assertions not flushed before act ([#28745](facebook/react#28745)) //<Ricky>//
- **[ed3c65caf](facebook/react@ed3c65caf )**: Warn if outdated JSX transform is detected ([#28781](facebook/react#28781)) //<Andrew Clark>//
- **[3f9e237a2](facebook/react@3f9e237a2 )**: Fix: Suspend while recovering from hydration error ([#28800](facebook/react#28800)) //<Andrew Clark>//
- **[7f5d25e23](facebook/react@7f5d25e23 )**: Fix cloneElement using string ref w no owner ([#28797](facebook/react#28797)) //<Joseph Savona>//
- **[bf40b0244](facebook/react@bf40b0244 )**: [Fizz] Stop publishing external-runtime to stable channel ([#28796](facebook/react#28796)) //<Josh Story>//
- **[7f93cb41c](facebook/react@7f93cb41c )**: [DOM] Infer react-server entries bundles if not explicitly configured ([#28795](facebook/react#28795)) //<Josh Story>//
- **[f61316535](facebook/react@f61316535 )**: Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([#28789](facebook/react#28789)) //<Sebastian Markbåge>//
- **[9644d206e](facebook/react@9644d206e )**: Soften useFormState warning ([#28788](facebook/react#28788)) //<Ricky>//
- **[c771016e1](facebook/react@c771016e1 )**: Rename The Secret Export of Server Internals ([#28786](facebook/react#28786)) //<Sebastian Markbåge>//
- **[d50323eb8](facebook/react@d50323eb8 )**: Flatten ReactSharedInternals ([#28783](facebook/react#28783)) //<Sebastian Markbåge>//
- **[f62cf8c62](facebook/react@f62cf8c62 )**: [Float] treat `props.async` in Float consistent with the rest of react-dom ([#26760](facebook/react#26760)) //<Josh Story>//
- **[dfd3d5af8](facebook/react@dfd3d5af8 )**: Add support for transition{run,start,cancel} events ([#27345](facebook/react#27345)) //<Hugo Sales>//
- **[1f8327f83](facebook/react@1f8327f83 )**: [Fiber] Use real event priority for hydration scheduling ([#28765](facebook/react#28765)) //<Josh Story>//
- **[97c90ed88](facebook/react@97c90ed88 )**: [DOM] Shrink ReactDOMCurrentDispatcher method names ([#28770](facebook/react#28770)) //<Josh Story>//
- **[9007fdc8f](facebook/react@9007fdc8f )**: [DOM] Shrink ReactDOMSharedInternals source representation ([#28771](facebook/react#28771)) //<Josh Story>//
- **[14f50ad15](facebook/react@14f50ad15 )**: [Flight] Allow lazily resolving outlined models ([#28780](facebook/react#28780)) //<Sebastian Markbåge>//
- **[4c12339ce](facebook/react@4c12339ce )**: [DOM] move `flushSync` out of the reconciler ([#28500](facebook/react#28500)) //<Josh Story>//
- **[8e1462e8c](facebook/react@8e1462e8c )**: [Fiber] Move updatePriority tracking to renderers ([#28751](facebook/react#28751)) //<Josh Story>//
- **[0b3b8a6a3](facebook/react@0b3b8a6a3 )**: jsx: Remove unnecessary hasOwnProperty check ([#28775](facebook/react#28775)) //<Andrew Clark>//
- **[2acfb7b60](facebook/react@2acfb7b60 )**: [Flight] Support FormData from Server to Client ([#28754](facebook/react#28754)) //<Sebastian Markbåge>//
- **[d1547defe](facebook/react@d1547defe )**: Fast JSX: Don't clone props object ([#28768](facebook/react#28768)) //<Andrew Clark>//
- **[bfd8da807](facebook/react@bfd8da807 )**: Make class prop resolution faster ([#28766](facebook/react#28766)) //<Andrew Clark>//
- **[cbb6f2b54](facebook/react@cbb6f2b54 )**: [Flight] Support Blobs from Server to Client ([#28755](facebook/react#28755)) //<Sebastian Markbåge>//
- **[f33a6b69c](facebook/react@f33a6b69c )**: Track Owner for Server Components in DEV ([#28753](facebook/react#28753)) //<Sebastian Markbåge>//
- **[e3ebcd54b](facebook/react@e3ebcd54b )**: Move string ref coercion to JSX runtime ([#28473](facebook/react#28473)) //<Andrew Clark>//
- **[fd0da3eef](facebook/react@fd0da3eef )**: Remove _owner field from JSX elements in prod if string refs are disabled ([#28739](facebook/react#28739)) //<Sebastian Markbåge>//

Changelog:
[General][Changed] - React Native sync for revisions 48b4ecc...b5e5ce8

jest_e2e[run_all_tests]
bypass-github-export-checks

Reviewed By: kassens

Differential Revision: D56251607

fbshipit-source-id: e16db2fa101fc7ed1e009158c76388206beabd5f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants