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

Fix: Skip hidden inputs before text instance #27358

Merged
merged 1 commit into from
Sep 11, 2023

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Sep 11, 2023

Found a hydration bug that happens when you pass a Server Action to formAction and the next node is a text instance.

The HTML generated by Fizz is something like this:

<button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST">
  <input type="hidden" name="$ACTION_5:0" value="..."/>
  <input type="hidden" name="$ACTION_5:1" value="..."/>
  <input type="hidden" name="$ACTION_KEY" value="..."/>Count: <!-- -->0
</button>

Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle this correctly if the next expected node isn't a host instance. In this case, it's a text instance.

Not sure if the proper fix is to change the HTML that is generated, or to change the hydration logic, but in this PR I've done the latter.

Found a hydration bug that happens when you pass a Server Action to `formAction`
and the next node is a text instance.

The HTML generated by Fizz is something like this:

  <button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST">
    <input type="hidden" name="$ACTION_5:0" value="..."/>
    <input type="hidden" name="$ACTION_5:1" value="..."/>
    <input type="hidden" name="$ACTION_KEY" value="..."/>Count: <!-- -->0
  </button>

Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle
this correctly if the next expected node isn't a host instance. In this case,
it's a text instance.

Not sure if the proper fix is to change the HTML that is generated, or to
change the hydration logic, but in this commit I've done the latter.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 11, 2023
@react-sizebot
Copy link

Comparing: 627b7ab...4a0ca0f

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 = 165.63 kB 165.63 kB = 51.88 kB 51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.03% 174.82 kB 174.88 kB +0.02% 54.69 kB 54.70 kB
facebook-www/ReactDOM-prod.classic.js = 570.44 kB 570.44 kB = 100.45 kB 100.45 kB
facebook-www/ReactDOM-prod.modern.js = 554.21 kB 554.21 kB = 97.61 kB 97.61 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4a0ca0f

@acdlite acdlite merged commit a4aceaf into facebook:main Sep 11, 2023
2 checks passed
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Found a hydration bug that happens when you pass a Server Action to
`formAction` and the next node is a text instance.

The HTML generated by Fizz is something like this:

```html
<button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST">
  <input type="hidden" name="$ACTION_5:0" value="..."/>
  <input type="hidden" name="$ACTION_5:1" value="..."/>
  <input type="hidden" name="$ACTION_KEY" value="..."/>Count: <!-- -->0
</button>
```

Fiber is supposed to skip over the extra hidden inputs, but it doesn't
handle this correctly if the next expected node isn't a host instance.
In this case, it's a text instance.

Not sure if the proper fix is to change the HTML that is generated, or
to change the hydration logic, but in this PR I've done the latter.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Found a hydration bug that happens when you pass a Server Action to
`formAction` and the next node is a text instance.

The HTML generated by Fizz is something like this:

```html
<button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST">
  <input type="hidden" name="$ACTION_5:0" value="..."/>
  <input type="hidden" name="$ACTION_5:1" value="..."/>
  <input type="hidden" name="$ACTION_KEY" value="..."/>Count: <!-- -->0
</button>
```

Fiber is supposed to skip over the extra hidden inputs, but it doesn't
handle this correctly if the next expected node isn't a host instance.
In this case, it's a text instance.

Not sure if the proper fix is to change the HTML that is generated, or
to change the hydration logic, but in this PR I've done the latter.

DiffTrain build for commit a4aceaf.
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.

4 participants