Select Content Dropdown > Opens from bottom to top and no scroll and does not position at selected value

[Ryuk-hash]

Hi, I've been using Shadcn for my apps and it's been easy to use along with the ui, it looks great!

I've hit a snag here, and could use some help.

I have a country select dropdown menu that the user can select. Obviously the list is huge.

Default state: "India" is selected. The problem is:

1. On opening the dropdown, it opens from bottom to top (expected is top to bottom)
2. The dropdown is not positioned at the default (India) value but rather at the end of the list.
3. The list goes out of screen.
4. No scroll either

Possible fixes but not ideal:

1. One fix was to wrap the SelectItems with ScrollArea with a specified height, this worked like a charm. Expected: Position should have been top-to-bottom but again it opens to the top.

2. The second fix was to add in position: 'item-aligned' prop on SelectContent. Works, but it shows the entire list (covering the entire height of the page). Expected: Open under the dropdown.

Form Component Code:

<FormField
              control={usedForm.control}
              name="country"
              render={({ field }) => (
                <FormItem className="mb-5">
                  <FormLabel>
                    Country <span className="text-danger">*</span>
                  </FormLabel>
                  <Select onValueChange={(e) => updateForm({ country: e, state: null, city: null })} defaultValue={country}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select Country" />
                      </SelectTrigger>
                    </FormControl>

                    <SelectContent>
                      <SelectGroup>
                        <SelectLabel>Countries</SelectLabel>

                        <ScrollArea className="h-72">{countries}</ScrollArea>
                      </SelectGroup>
                    </SelectContent>
                  </Select>

                  <FormMessage />
                </FormItem>
              )}
            />

System: MacBook Air M1, 2020; macOS Ventura 13.5
Browser: Chrome (Version 116.0.5845.179 (Official Build) (arm64)

Please let me know if any other details are required. Hoping for a quick resolution, thanks!

[grmkris]

hey I'm having same "issue"

[dodycode]

Up. any updates for this one?

[tomdev-FE]

Same question, any updates ?

[obetReyes]

did you find any solution?

[dimmasyusuf]

Hey everyone, just a quick tip! You can use side="bottom" in to position it at the bottom, like this:

<SelectContent side="bottom">
  ...
</SelectContent>

Hope that helps!