Open
Description
React version: 19.1.0
Steps To Reproduce
- Implement a select box with the new styling API. For example, follow the MDN tutorial, specifically this point.
Link to code example: (Pure html/css reproduction of <button> working inside of <select>): https://codepen.io/web-dot-dev/pen/gbOKyRZ
The current behavior
An error in the console:
In HTML,
<button>cannot be a child of<select>.
This will cause a hydration error.
The expected behavior
No error.
Additional context
- For now, only Chomium browsers support this: https://caniuse.com/mdn-css_properties_appearance_base-select
- Some time ago, a similar issue Bug: 'Warning: validateDOMNesting: <hr> cannot appear as a child of <select>' – but this is now valid HTML #27572 was opened and resolved, but it only mentioned the
<hr/>tag. The reason for supporting that seems to have been different than this issue. - While I opened this issue with the primary focus on the
<button>element, now also more elements are supported within the<option>element - source. Should I open a separate issue for that, or do we track everything related here?- Additionally, the CSS spec mentions that there will be HTML spec changes to all form controls to allow for new styling API - source. That means that possibly in the future, different child elements will be permitted on different form controls.
The spec
Not all relevant specs were updated. While the CSS spec is ready, HTML isn't. Issues and PRs related to this are tracked here.
Loosely related
I also opened an issue in @types/react for adding a definition of a new element related to this new customisable select: DefinitelyTyped/DefinitelyTyped#73079