Skip to content

Children of option tags flattened when select has value #11602

Closed
@jorrit

Description

@jorrit

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

What is the current behavior?
When the following is rendered to string using ReactDOM:

<select value=""><option>a ({`b`})</option></select>

I get

<select data-reactroot=""><option>a (b)</option></select>

When hydrating the above code, I get this warning:

Warning: Text content did not match. Server: "a (b)" Client: "a ("

Fiddle: https://jsfiddle.net/z1q0azjL/1/

What is the expected behavior?

I should get:

<select data-reactroot=""><option>a (<!-- -->b<!-- -->)</option></select>

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

16.1.1

This has something to do with flattenOptionChildren in ReactPartialRenderer.js.

PS:
When browsing ReactPartialRenderer.js, I found this code:

        props = Object.assign(
          {
            selected: undefined,
            children: undefined,
          },
          props,
          {
            selected: selected,
            children: optionChildren,
          },
        );

What is the point of those undefined props when they are overwritten later on?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions