"Unable to find element" error on <option> elements

[mmavko]

If the contents of the <option> element is constructed in special way, it breaks React on component update with "Unable to find element" error. Here's an example of render method body:

    var v1 = String(Math.random());
    var v2 = String(Math.random());
    return <select><option value={v2}>{v1} ({v2})</option></select>;

Here's working jsfiddle (with React 0.12.0): http://jsfiddle.net/rp3fz0nf/1/

Adding key={v2} to option props fixes the issue.

[waldreiter]

React separates the <option>'s children with <span>s. In HTML only text is allowed there and the browser handles it gracefully by removing the <span>s. On the next render React tries to change those <span>s, but can't find them.

A workaround is to give a string to the <option>:

var text = v1 + '(' + v2 + ')';
return <select><option value={v2}>{text}</option></select>;

[mmavko]

Thanks for explaining this. In such case probably the best solution would be to extend error explanation with information about "option" elements (behind "table" etc).

[zpao]

Yea, we should probably do some checks in our ReactDOMOption wrapper and not allow anything but text as children.

[ryanflorence]

Just hit this http://jsfiddle.net/kg7g09cq/

[sophiebits]

This can be fixed by using ReactChildren.forEach in ReactDOMOption to flatten the children before passing it to the raw HTML component. Strings and numbers get concatted together; other elements should be skipped and log a warning for invalid children.