React's DOM validation needs updating for new customizable select elements.
The issue reports hydration warnings when using new customizable select elements with spans in options or buttons in selects. React's DOM validation needs updating to recognize these valid HTML patterns. The challenge is ensuring this change doesn't break existing validation logic.
Customizable select elements have received support in Chromium 134: https://developer.chrome.com/blog/a-customizable-select https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Creating selects with appearance base-select work fine in React, however an error is logged in dev mode in validating DOM nesting.
In HTML, <span> cannot be a child of <option>.
This will cause a hydration error.
and
In HTML, <button> cannot be a child of <select>.
This will cause a hydration error.
React version: 19.1.0
Link to code example: https://codesandbox.io/p/sandbox/quiet-cdn-ylm323?file=%2Fsrc%2FApp.js%3A9%2C59
A hydration warning is logged
No error logged, no hydration errors should be happening (?)
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!