HTML Select Option Can't Handle React Child Node

[brenthosie]

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

What is the current behavior?
The Option component used for HTML Select can no longer support React Nodes as a child.

Fiddle of problem
https://jsfiddle.net/83hr5smv/

What is the expected behavior?
The select would display the option label using the wrapped React node.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I tried to upgrade to v16.6.3 when I found this problem. Last known working version was v16.2.0. I haven't investigated between 16.2.0 and 16.6.3, but I did confirm this is still a problem on the latest stable v16.8.2.

[mdjasper]

I think the <option> tag can only contain text, right?

Permitted content | Text, possibly with escaped characters (like é)

-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute: and is not a child of a datalist element: Text that is not inter-element white space.
If the element has no label attribute and is a child of a datalist element: Text.

-https://www.w3.org/TR/html52/sec-forms.html#the-option-element

Warning: Only strings and numbers are supported as <option> children.
    in option (created by App)
    in select (created by App)
    in App react-dom.development.js:500:7 

-https://jsfiddle.net/mdjasper/d5yxcgk4/3/

This is implemented in React Dom

if (typeof props.children === 'object' && props.children !== null) {
      React.Children.forEach(props.children, function(child) {
        if (child == null) {
          return;
        }
        if (typeof child === 'string' || typeof child === 'number') {
          return;
        }
        if (typeof child.type !== 'string') {
          return;
        }
        if (!didWarnInvalidChild) {
          didWarnInvalidChild = true;
          warning(
            false,
            'Only strings and numbers are supported as <option> children.',
          );
        }
      });
}

react/packages/react-dom/src/client/ReactDOMOption.js

Line 42 in b87aabd

export function validateProps(element: Element, props: Object) {

[brenthosie]

@mdjasper This is what the spec says. I don't see any release notes mentioning that they were deprecating this though?

[brenthosie]

A colleague has found this: #13465

Apparently working as designed.

[gaearon]

This "works" in React 18: https://jsfiddle.net/ce6yo17w/1/

Aside from that putting <span> into <option> is not valid and will break SSR.