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!

[geoMJ]

Another tip if anyone is having the issue and @dimmasyusuf 's suggestion is not working for you. My problem was that my list was very long and Shadcn's SelectContent component has a max-height of tailwind 96, which is 24rem / 384px. This caused a collision with the bottom of my parent component or my screen, not sure which. By default, Radix' popover inverts the side if a collision is detected, so it automatically sets the side to top even if you set it to bottom yourself.

Anyways, if you still want a drop-down style select, the simple fixes are :

• Option 1 : set avoidCollisions to false
• Option 2 : reduce the select content's height (I find it better visually speaking)

Hope it helps !

[x0y-gt]

I have a long list(around 500-600 items), when I search it doesn't show the items at the top first, its very annoying.

I have tried some tips in the comments above but not working so far, does anyone have found a solution?