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.

https://github.com/shadcn-ui/ui/assets/47532703/0d90fe85-fadd-4c92-95f7-9018183e330e

[mukul-7661]

What's this select pointing to?

[SilasRodrigues19]

Hey @mukul7661

I hadn't really noticed that it appears there as if the element was "loose" on the page, I'll look again later. Thank you very much.

But anyway, I don't understand when I look at devtools and see the option tags without the value property and without text content.

In this context I expected something like this:

<option value="4images">4 Images</option>
<option value="3images">3 Images</option>
<option value="2images">2 Images</option>
<option value="1image">1 Image</option>

[mukul-7661]

The options are not showing in devtools because they are not present in DOM unless dropdown is not clicked.

[yayashn]

The options are not showing in devtools because they are not present in DOM unless dropdown is not clicked.

This is incorrect, the options show in the DOM regardless of whether the dropdown is clicked or not. Only the UI options are not present - the native <option> tags nested in the hidden <select> tag are always in the DOM.

Hey @mukul7661

I hadn't really noticed that it appears there as if the element was "loose" on the page, I'll look again later. Thank you very much.

But anyway, I don't understand when I look at devtools and see the option tags without the value property and without text content.

In this context I expected something like this:

<option value="4images">4 Images</option>
<option value="3images">3 Images</option>
<option value="2images">2 Images</option>
<option value="1image">1 Image</option>

I've tested your code and it works fine for me so your code is correct, must be an issue with the code surrounding it or something.

[SilasRodrigues19]

Hey @yayashn

Maybe I expressed myself poorly, I know that elements appear in the DOM regardless of whether the select is expanded or not. The problem is that when I click it doesn't expand anything and looking at the DOM I just see an option without the value and without the text content. In other words, it doesn't appear in the DOM or on the page itself, but I've already reviewed the code and I can't find anything wrong. Maybe it's a conflict with something in Astro but I haven't identified it yet.

I'll reinstall things and try to build them with minimal interference from other libraries to see if there are any conflicts, thanks for the help.

[yayashn]

Hey @yayashn

Maybe I expressed myself poorly, I know that elements appear in the DOM regardless of whether the select is expanded or not. The problem is that when I click it doesn't expand anything and looking at the DOM I just see an option without the value and without the text content. In other words, it doesn't appear in the DOM or on the page itself, but I've already reviewed the code and I can't find anything wrong. Maybe it's a conflict with something in Astro but I haven't identified it yet.

I'll reinstall things and try to build them with minimal interference from other libraries to see if there are any conflicts, thanks for the help.

@SilasRodrigues19 yeah I was responding to the other person who replied to you with that first one. But yeah your code works for me so must be an issue with the environment or something.

[MeddahAbdellah]

Add client:load directive to your component in the astro file, so that events can be attached (since Astro renders server side by default it can't attach on click events like react does )

[SilasRodrigues19]

Hey @MeddahAbdellah

I looked here in the Astro documentation and found this information in the Astro islands section, it was something that went unnoticed: https://docs.astro.build/en/concepts/islands/

I tested what you suggested and it worked, thank you very much.