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

[ZhangYiJiang]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

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

Reproduction: https://jsfiddle.net/0opjvycp/

1. Change the value of the <select>
2. React crashes with NotFoundError: Node was not found

From what I can tell, the conditional value is necessary, and it must be three interpolated values.

What is the expected behavior?

React should not crash.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React DOM 16.2 and 16.0. I think this worked in 15.6 - https://jsfiddle.net/mrwkmuqc/ does not crash

[gaearon]

Tagging as good first issue.

[mannanali413]

@gaearon i can take this up :)

[jorrit]

Could this be related to #11602 ?

[gaearon]

@mannanali413 Any progress?

[kevinzwhuang]

@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).