react: React DOM crashes when contains three interpolated value if one is a conditional.

@gaearon Hi, Dan! I’ve created a PR that solves the issue. I’ve added example into fixtures so it would be easy to test. Let’s discuss this solution 😃

@gaearon I experienced this regression myself yesterday when upgrading from 15.4.2 to 16.2.0. Here’s a simple repro of the problem I was seeing: https://jsfiddle.net/qkc4eyqe/1/

Same issue - different error message: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I’m not sure if @mannanali413 is still working on a fix for this, but I can take a closer look later today too.

To anyone else experiencing this problem, the only workaround I’ve found so far is to remove the conditional logic (at least until a fix is found).

after update 16.13.1 I am getting the same error

does anyone found any solution ?

@gaearon Hi Dan! I would like to investigate into this problem and try to help with fix.

@itssumitrai This issue is about option. If you have a problem with some other tag please file a new issue with a reproducing example.

@dgrcode Knowing that you hit it too doesn’t add anything to this conversation. Comments notify everybody subscribed to this thread so it’s best to avoid commenting if it doesn’t add new info. If you’d like to share more details, or help get it fixed, please let us know!

I have the same problem with this code

<select>
	{ this.state.option === 'first' ?
		<option>{ '' } a</option>
		:
		<option></option>
	}
</select>

or

<option><br/> a</option>
:
<option></option>

because React try to delete each node from option

@kevinzwhuang my workaround is to use unique keys https://jsfiddle.net/qkc4eyqe/5/ or https://jsfiddle.net/qkc4eyqe/8/

Getting closer to finding the root of the problem by running this code with v15 - it looks like what changed from 15/stack to 16/fiber for this operation is that: in v15, it would execute setTextContent to update the <option> text for all cases. in v16, it executes removeChild or insertBefore, or whatever variation of the operation where ReactDOM assumes text nodes should be added or removed - when in fact there shouldn’t be more than 1 child node because it’s flattened in ReactDOMFiberOption (option text nodes were also flattened before in v15, so flattening might be not the issue here) (whereas this is the normal set of operations for generic components in 15 and 16 because text nodes aren’t flattened in other components)

@gaearon - I think the solution has something to do with going back to the old behavior of doing setTextContent for <option> updates - I’m not sure yet how to go about doing this yet, but this is a step closer to finding it.

@gaearon i can take this up 😃