Bug: 'Warning: validateDOMNesting: <hr> cannot appear as a child of <select>' – but this is now valid HTML

[philwolstenholme]

The latest version of Chrome and Safari support hr elements as children of select elements, and the HTML spec has been updated – but React warns about this as it used to be invalid HTML.

• https://developer.chrome.com/blog/hr-in-select
• https://webkit.org/blog/14445/webkit-features-in-safari-17-0/#:~:text=Horizontal%20rules%20inside%20select%20elements
• https://html.spec.whatwg.org/#the-select-element-2:~:text=Zero%20or%20more%20option%2C%20optgroup%2C%20hr%2C%20and%20script%2Dsupporting%20elements.
• https://html.spec.whatwg.org/#the-select-element-2:~:text=Occasionally%20it%20can%20be%20useful%20to%20have%20a%20separator%3A

React version: 18.2.0

Steps To Reproduce

1. Add a hr element as a child of select

The current behavior

Warning: validateDOMNesting: <hr> cannot appear as a child of <select>

The expected behavior

No validateDOMNesting warning.

[philwolstenholme]

Would a fix for this be to add || tag === 'hr' in https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/validateDOMNesting.js#L247?

I can't see a reference to select in https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/validateDOMNesting-test.js.

[sophiebits]

Sure, feel free to send a PR for that and tag me in it.

[mglavall]

Hey there!

I'm currently on a previous version of React and can't update just yet. Is there a way to hide this Warning/Validation until I do?

Thanks a lot

[Flip437]

Hey there!

I'm currently on a previous version of React and can't update just yet. Is there a way to hide this Warning/Validation until I do?

Thanks a lot

UP plz :)

[arnaudambro]

Up !