Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML Select Option Can't Handle React Child Node #14903

Closed
brenthosie opened this issue Feb 20, 2019 · 4 comments
Closed

HTML Select Option Can't Handle React Child Node #14903

brenthosie opened this issue Feb 20, 2019 · 4 comments

Comments

@brenthosie
Copy link

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
Copy link

mdjasper commented Feb 20, 2019

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.',
          );
        }
      });
}

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

@brenthosie
Copy link
Author

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

@brenthosie
Copy link
Author

A colleague has found this: #13465

Apparently working as designed.

@gaearon
Copy link
Collaborator

gaearon commented Mar 30, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants