Uncaught Error: "Unable to find element" when updating the innerhtml of an Option element.

[Surreal9]

My co-worker and I were caught off-guard by this behaviour yesterday, and I wanted to see if this is a possible React bug or some misunderstanding on our part.

Basically it seems having more than one part to the innerhtml of an option element and then trying to update one of them will throw the error:

"Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.$0.0): Unable to find element.
This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent.
Try inspecting the child nodes of the element with React ID ``."

We have worked around it by combining the parts into a single variable and then using that.

Here is the jsfiddle demonstrating the error: http://jsfiddle.net/johnarnold212675186/14te87oy/
Here is what we've done as a workaround: http://jsfiddle.net/johnarnold212675186/zqgjjwaL/

Am I doing something wrong, or is this something that should be possible with React?

[Surreal9]

Just posted this to the IRC, it was explained that this is likely happening because React renders multiple text parts wrapped with span tags, which the browser recognizes as invalid html and strips out, confusing React when it goes to re-render. I guess it doesn't wrap the text in a span if it's a single piece.

I guess this makes it 'intended behaviour', but it was surprising nevertheless. Perhaps the error message should be updated to give a hint towards this specific cause. (it already mentions the browser adding a tbody which is where I had first come across this error)

[jimfb]

I would say this is clearly a bug, because anything that passes initial render should pass update render. Thanks for flagging it for us!

[waldreiter]

Same bug as issue #2620.

[sophiebits]

Closing in favor of #2620. You should also get an explicit warning for this now in master.