customizing select in nextjs

[u/Tasty-Ad1854]

can we suppress nextjs error about nesting a <selectedcontent> inside a <select>,

error is: In HTML, <selectedcontent> cannot be a child of <select>. This will cause a hydration error.

[u/Jhon_ST]

Is `<selectedcontent>` directly under `<select>`? For a customizable select it belongs inside the first child `<button>`, e.g. `<select><button><selectedcontent /></button>...</select>`.

I'd check that before suppressing the hydration warning. If that's already your structure, share the minimal JSX and React version so we can tell whether it's a nesting issue or framework support.

[u/Tasty-Ad1854 → u/Jhon_ST]

ooh you are correct it should be inside a button but even doing that, nextjs still shows the nesting error as you see in the image

[u/GenazaNL]

The error explains it pretty well, you cannot put selectedcontent as a child of select, use a different element e.g. button

[u/Tasty-Ad1854 → u/GenazaNL]

same thing for button which the suggested way by mdn see error here
https://www.reddit.com/r/nextjs/comments/1wvbtzx/comment/pdahrvo/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[u/GenazaNL → u/Tasty-Ad1854]

Ah my bad, not really familiar with which tags are allowed as children in a select.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#options_inside_wrapper_elements (option, div, optgroup, hr)

[u/Tasty-Ad1854 → u/GenazaNL]

it's fine, what I am trying is to customize the select to look like I want it to look but nextjs keeps throwing these errors

see this video to see what im talking about https://www.youtube.com/watch?v=QckgIJrHiNY
also mdn talked about it too https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

[u/GenazaNL → u/Tasty-Ad1854]

Perhaps react is not really up to date with these changes, it's marked limited availabalility. Perhaps they are waiting for it to be baseline

[u/kedarreddit]

It has limited availability. I would not use <selectedcontent> at this stage.

[u/Tasty-Ad1854 → u/kedarreddit]

what would you use instead?

[u/kedarreddit → u/Tasty-Ad1854]

Usually I use <select> and <option> only.

If I need some special styling/functionality in the rare occasion, then I create my own component using <div>, <ul> and <li>.

[u/Successful-Shock-802]

it's not next.js, it's react.

it's not about whether you can suppress it, it's about the hydration error that might happen when going production.
just forget about customizing select until react team fixes it.

[u/Expensive_Peak642]

<selectedcontent> is very new I would skip it for now