Fix a crash when using dynamic children in <option> tag #13261

Slowyn · 2018-07-24T17:00:16Z

fix #11911

I had to move validateDOMNesting into the flattening process so it causes a different warning message. I'm not sure if this is a right approach.

The problem

After the investigation, I got that the reason of crash was desynchronization of Fiber and real node.
<option /> flattens its children, while Fiber does not. So we can pass into <option /> an array of children e.g.

['some', <div>5</div>, null, ' string']

It flattens to a string

'some string'

But Fiber keeps links to all children. Let's assume that null depends on some state. Fiber will try to update children using insertBefore, but as we don't have a real node in DOM, it caused a runtime error.

Solution

<option />'s children should be a string and we have to filter children. The simplest solution was to allow react to set content as a direct text child. It solves the issue and makes a behavior of <option /> like in React v.15... Unfortunately, this solution leads us to skip validateDOMNesting.

facebook-github-bot · 2018-07-24T17:00:25Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

facebook-github-bot · 2018-07-24T17:22:58Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

fix facebook#11911

Slowyn · 2018-07-26T13:49:00Z

packages/react-dom/src/__tests__/ReactDOMOption-test.js

-      '<div> cannot appear as a child of <option>.\n' +
-        '    in div (at **)\n' +
-        '    in option (at **)',
+      '<div> cannot appear as a child of <option>.\n' + '    in option (at **)',


This is a behavior change and I'm not sure how to avoid this with this solution. But it's only warning, so shouldn't be critical.

I think this is okay. Particularly since the problem is still identified in the message (even if the nest doesn't show up).

@aweary or @gaearon Do you anticipate any problems with changing this warning text?

nhunzaker

Can you revert scripts/rollup/results.json?

Other than that, this looks good.

nhunzaker · 2018-07-26T17:24:02Z

packages/react-dom/src/__tests__/ReactDOMOption-test.js

-      '<div> cannot appear as a child of <option>.\n' +
-        '    in div (at **)\n' +
-        '    in option (at **)',
+      '<div> cannot appear as a child of <option>.\n' + '    in option (at **)',


I think this is okay. Particularly since the problem is still identified in the message (even if the nest doesn't show up).

gaearon · 2018-07-26T17:34:51Z

packages/react-dom/src/client/ReactDOMFiberOption.js

+    if (__DEV__) {
+      // We do not have HostContext here
+      // but we can put some parent information at least
+      // Also this cause a bit different message than it was previously


Nit: “a bit different message” would become meaningless after merging this PR. Let’s ensure any comments are helpful to future readers.

- Remove meaningless comments - revert scripts/rollup/results.json

Slowyn · 2018-07-26T18:07:37Z

My IDE automatically insert an empty row at the end of file -_-
I've "reverted" scripts/rollup/results.json and removed the unnecessary comment.

nhunzaker · 2018-07-26T18:11:08Z

packages/react-dom/src/client/ReactDOMFiberOption.js

+    }
+    if (__DEV__) {
+      // We do not have HostContext here
+      // but we can put some parent information at least


Nit: Could you reformat this like:

// We do not have HostContext here, but we can at least // put some parent information

nhunzaker

Does this behavior cause an issue in JSDOM too? I'm curious if the manual fixture could be moved into a unit test.

Slowyn · 2018-07-26T18:18:55Z

I can try to write a test. I think It's a case for DOMSelect-test, right?

nhunzaker · 2018-07-26T18:20:02Z

Yep!

…

On Thu, Jul 26, 2018, 11:19 AM Konstantin Yakushin ***@***.***> wrote: I can try to write a test. I think It's a case for DOMSelect-test, right? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13261 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAkEOLqoQTtDM7zWlvJhVfMKOjkx-dFQks5uKggfgaJpZM4VdHP6> .

gaearon

I don't understand why "we don't have host context here".

This function is called from getHostProps which is called from setInitialProperties which is called from finalizeInitialChildren which definitely has host context. Pass it through.

Slowyn · 2018-07-26T19:23:34Z

@gaearon You are right, I've totally missed it. But after a quick look, it seems that sometimes hostContext is undefined. I'm checking now.

Slowyn · 2018-07-26T19:26:24Z

It seems like it's a consequence of this changes.

gaearon · 2018-07-26T19:48:29Z

Can you push the code that doesn't work so I can take a look?

Slowyn · 2018-07-26T21:16:33Z

Sorry, I wasn't able to push right away.
I forgot to pass ancestorInfo when was making the screenshot., but passing ancestorInfo wouldn't change the result.

gaearon · 2018-07-31T15:40:37Z

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -545,6 +545,48 @@ describe('ReactDOMSelect', () => {
    expect(node.options[2].selected).toBe(false); // gorilla
  });

+  it('should not fail', () => {


This is very vague.

Yeah, It's some temporary "name" until we get a full working version.
Going to change it to some concrete form 😄

Have you taken a look on anccestorInfo in current case?

What about this description: "Options with stateful children; it should change its state properly and shouldn't fail"
What do you think?

gaearon · 2018-08-01T13:40:27Z

Seems like the reason this doesn't work is because the host context we get is from option's parent, not option itself.

gaearon

I think this is good. Thanks for digging to the bottom of this. I made a few tweaks so that it warns during SSR hydration too.

* Make option children a text content by default fix facebook#11911 * Apply requested changes - Remove meaningless comments - revert scripts/rollup/results.json * remove empty row * Update comment * Add a simple unit-test * [WIP: no flow] Pass through hostContext * [WIP: no flow] Give better description for test * Fixes * Don't pass hostContext through It ended up being more complicated than I thought. * Also warn on hydration

exogen · 2019-01-18T03:19:05Z

FYI, I just upgraded React and I suspect this change (or one of the other <option> PRs) caused a backwards incompatibility within the 16.x channel.

Despite the HTML <option> tag only allowing strings for labels, all that should matter in React is what makes it to the final HTML output. For instance, these should (and used to) work:

<option><React.Fragment>Label A</React.Fragment></option>

import { FormattedMessage } from 'react-intl';
<option><FormattedMessage>{msg => "Label B"}</FormattedMessage></option>

const MyLabel = () => "Label C";
<option><MyLabel /></option>

All three of the above worked in 16.4.x, but will render [object Object] as the option label now. Due to using the middle technique above in our app, some of our forms unfortunately started doing this.

Edit: looks like this was already discussed in #13586

gaearon · 2022-03-30T00:50:31Z

This works again in 18 if you specify value for <option>.

Slowyn changed the title ~~Make option children a text content by default~~ [#11911] Make option children a text content by default Jul 24, 2018

Slowyn mentioned this pull request Jul 24, 2018

React DOM crashes when <option> contains three interpolated value if one is a conditional. #11911

Closed

facebook-github-bot added the CLA Signed label Jul 24, 2018

Make option children a text content by default

388028e

fix facebook#11911

Slowyn force-pushed the feature/fix-option branch from 0367120 to 388028e Compare July 24, 2018 18:52

Slowyn commented Jul 26, 2018

View reviewed changes

nhunzaker suggested changes Jul 26, 2018

View reviewed changes

gaearon reviewed Jul 26, 2018

View reviewed changes

Slowyn added 2 commits July 26, 2018 20:47

Apply requested changes

f829340

- Remove meaningless comments - revert scripts/rollup/results.json

remove empty row

73697ef

nhunzaker reviewed Jul 26, 2018

View reviewed changes

nhunzaker approved these changes Jul 26, 2018

View reviewed changes

nhunzaker reviewed Jul 26, 2018

View reviewed changes

Update comment

65691b6

gaearon previously requested changes Jul 26, 2018

View reviewed changes

Add a simple unit-test

9ca2085

[WIP: no flow] Pass through hostContext

931417b

gaearon reviewed Jul 31, 2018

View reviewed changes

[WIP: no flow] Give better description for test

485d8db

Fixes

a6a8d1c

gaearon approved these changes Aug 1, 2018

View reviewed changes

gaearon merged commit 0182a74 into facebook:master Aug 1, 2018

gaearon mentioned this pull request Aug 1, 2018

fix: React DOM crashes when <option> contains three interpolated valu… #12078

Closed

10 tasks

This was referenced Aug 2, 2018

Prevent incorrect options SSR hydrate mismatch, fix #11602 #12088

Closed

Children of option tags flattened when select has value #11602

Closed

nhunzaker mentioned this pull request Aug 3, 2018

Add test for multiple text nodes in an option tag #11623

Closed

gaearon mentioned this pull request Aug 22, 2018

Stringify <option> children #13465

Merged

gaearon mentioned this pull request Sep 5, 2018

Changelog for 16.5.0 #13571

Merged

gaearon mentioned this pull request Sep 7, 2018

[bug][16.5.0] option returns [object Object] instead of string #13586

Closed

dependencies bot mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

This was referenced Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix a crash when using dynamic children in <option> tag #13261

Fix a crash when using dynamic children in <option> tag #13261

Slowyn commented Jul 24, 2018 •

edited

facebook-github-bot commented Jul 24, 2018

facebook-github-bot commented Jul 24, 2018

Slowyn Jul 26, 2018 •

edited

nhunzaker Jul 26, 2018

nhunzaker Jul 26, 2018

nhunzaker left a comment

nhunzaker Jul 26, 2018

gaearon Jul 26, 2018

Slowyn commented Jul 26, 2018

nhunzaker Jul 26, 2018

nhunzaker left a comment

Slowyn commented Jul 26, 2018

nhunzaker commented Jul 26, 2018 via email

gaearon left a comment

Slowyn commented Jul 26, 2018

Slowyn commented Jul 26, 2018

gaearon commented Jul 26, 2018

Slowyn commented Jul 26, 2018

gaearon Jul 31, 2018

Slowyn Jul 31, 2018

Slowyn Jul 31, 2018

gaearon commented Aug 1, 2018

gaearon left a comment

exogen commented Jan 18, 2019 •

edited

gaearon commented Mar 30, 2022

Fix a crash when using dynamic children in <option> tag #13261

Fix a crash when using dynamic children in <option> tag #13261

Conversation

Slowyn commented Jul 24, 2018 • edited

The problem

Solution

facebook-github-bot commented Jul 24, 2018

facebook-github-bot commented Jul 24, 2018

Slowyn Jul 26, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nhunzaker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Slowyn commented Jul 26, 2018

Choose a reason for hiding this comment

nhunzaker left a comment

Choose a reason for hiding this comment

Slowyn commented Jul 26, 2018

nhunzaker commented Jul 26, 2018 via email

gaearon left a comment

Choose a reason for hiding this comment

Slowyn commented Jul 26, 2018

Slowyn commented Jul 26, 2018

gaearon commented Jul 26, 2018

Slowyn commented Jul 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Aug 1, 2018

gaearon left a comment

Choose a reason for hiding this comment

exogen commented Jan 18, 2019 • edited

gaearon commented Mar 30, 2022

Slowyn commented Jul 24, 2018 •

edited

Slowyn Jul 26, 2018 •

edited

exogen commented Jan 18, 2019 •

edited