Select is not rendering the options

[SilasRodrigues19]

I'm creating an application using Astro, React, Tailwind and Shadcn. It turns out that when I installed the Select component and tried to use it, I noticed that the option tag for some reason is not getting the value and text content.

My component code looks like this:

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

<Select>
  <SelectTrigger className="w-[180px] ring-1 ring-muted-foreground ring-offset-0 focus:ring-2">
    <SelectValue placeholder="4 Images" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Images</SelectLabel>
      <SelectItem value="4images">4 Images</SelectItem>
      <SelectItem value="3images">3 Images</SelectItem>
      <SelectItem value="2images">2 Images</SelectItem>
      <SelectItem value="1image">1 Image</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

I'm using the latest version, 0.5.0 at the moment. The import and installation is correct, I even used other shadcn components and only had a problem with select so far.

As shown in the video below, the select does not expand with the options and only render an option tag with no value defined and without text content when I look in devtools.

When I inspect it, a <select> element with 1px size appears, there is a rendering problem but i didn't find the solution.

error.mp4

[adebiyial]

Are you using the Select component in a .astro file?

If so, you'll need a client:* directive to control hydration. As it stands, it seems JavaScript is not been rendered on the page so the component has no interactivity. Client Directives

Add the client:load directive to the component.

<SelectDemo client:load />

[SilasRodrigues19]

Hey @adebiyial

I'm using it in a .tsx file, I integrated React with Astro as explained in the Astro docs, with the command below

pnpm astro add react

What I found strangest is that I was able to install other shadcn components and they worked perfectly. I did the same installation process for select component and had this problem.

I installed all components I wanted to use, with the command below and only the select component caused me this problem

# pnpm dlx shadcn-ui@last add <component_name>
pnpm dlx shadcn-ui@last add select

[adebiyial]

Yeah, the Select is a .tsx file, right? But how are you rendering it on the page? Are you importing it somewhere?

[SilasRodrigues19]

Hey @adebiyial

I was able to resolve the issue with the help of the community.

Basically I was missing adding a directive client:load to my component for Astro because it uses SSR by default

Follow the link where the issue is closed as resolved. Anyway, thanks for trying to help.

#2243

[adebiyial]

OK. Great. That's the same suggestion here #2415 (comment)

[SilasRodrigues19]

I hadn't seen that information there, sorry.

I think I must have read your comment before you edited it, I marked it here as a response to the discussion. Thanks.