Why are select options not rendered initially?

[stern-shawn]

I have noticed a small bug in the Twilio docs that's bothered me for some time, but I never thought to look into the Select implementation until working on fixing a flaky Select test for Code Exchange, where I noticed this behavior.

Is there a historic reason why the select options are not rendered initially? This causes a flicker of no visible selection when loading docs elements like multi-language code samples, etc which do have a pre-selected value at build time (ex. 'Node.js'), but render with empty holes statically which we otherwise can't avoid. It's a small detail that nobody but me probably notices, but it is confusing.

Video example with more complex elements that I'd expect to be statically rendered with visible default selections:

whee-flicker.mov

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Select defaultValue ignored (updated: 10/25/2023, similarity score: 85%)
• Combobox: strange behaviour in testing since Paste v15.3.0 (updated: 11/16/2022, similarity score: 84%)
• Option elements in select are scrolling along with the rest of the page - Answer (updated: 06/06/2023, similarity score: 84%)

[dosubot[bot]]

The Paste Select component intentionally delays rendering its options using a state variable that's only set after the component mounts in the browser. This was originally a workaround for hydration mismatches between server and client rendering—likely to avoid SSR issues or id mismatches—but it results in the flicker and empty select you’re seeing, especially when a value is pre-selected at build time. There’s a comment in the code noting uncertainty about whether this workaround is still needed with modern SSR best practices, and I couldn’t find any recent issues or discussions that revisit this decision. So, it looks like a legacy fix that may now be causing more harm than good in SSR/static contexts like the docs site.
Source

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[krisantrobus]

Hi @stern-shawn, the dosubot above summarizes this really well. This did previously fix and issue that was occurring. There was one other thing I saw in your recording and that is the default styling. When it is not mounted it shows the default light styling but you are using an inverse variant. That would be a good thing to address if it's the color that bothers you.

We cold potentially remove the delayed hydration but this would risk reintroducing the bug. On another note it may be harder/longer to get fixes or changes in. Recently the Paste engineers have been reallocated to other teams with the focus being on those products. There will be ways of escalating but there currently is no agreements reached for how to address engineering support. Our designers are still staffed to Paste and discussions are still being monitored.

[stern-shawn]

Cool, thanks! It's just a thing that I've noticed from looking at it too much and doesn't objectively hurt anything (besides a few tests that need to wait for the useEffect to settle) for now 😄

[stern-shawn]

If the coloring on mount is an easy fix either on our or your end let me know!

I may look into doing a custom implementation of Select that doesn't have the useEffect if it ends up being an issue for us but not other Paste users (I highly doubt Twilio Console does static rendering and needs this, and they're the biggest Paste consumer IIRC)

[krisantrobus]

Ah yea I'm not a fan of waiting in tests haha. It's an easy fix our end, I'll get a PR up today and share it with you for reference

[krisantrobus]

Here is the PR and yes, feel free to make a new implementation your end. Let us know if that fixes things for you and whether you encounter any bugs. Here is our source code

[stern-shawn]

Looks great, thank you so much! I'll see if that works well whenever it hits releases 🙌