Feature Request: Select Scroll Up/Down Buttons

[gregmsanderson]

Describe the bug

If a select includes many items it does not add up/down arrows, or scroll the way a native select element would (or how the original shadcn behaves, which would be a better comparison).

If you scroll down this page you can see the Scrollable part which demonstrates this:

https://ui.shadcn.com/docs/components/select

Reproduction

https://ui.shadcn.com/docs/components/select

Logs

No response

System Info

System:
    OS: macOS 14.1.1
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
  npmPackages:
    @sveltejs/kit: ^2.5.4 => 2.5.4 
    bits-ui: ^0.20.0 => 0.20.0 
    cmdk-sv: ^0.0.15 => 0.0.15 
    formsnap: ^0.5.1 => 0.5.1 
    mode-watcher: ^0.3.0 => 0.3.0 
    svelte: ^4.2.12 => 4.2.12 
    sveltekit-superforms: ^2.10.5 => 2.10.5 
    vaul-svelte: ^0.3.0 => 0.3.0

Severity

annoyance

[FaeWulf]

Set "max-height" "overflow-y-auto" into <Select.Content> will solve this problem for right now.

<Select.Root>
  <Select.Trigger class="w-[180px]">
    <Select.Value placeholder="Theme" />
  </Select.Trigger>
  <Select.Content class="max-h-[200px] overflow-y-auto">
    <Select.Item value="light">Light</Select.Item>
    <Select.Item value="dark">Dark</Select.Item>
    <Select.Item value="system">System</Select.Item>
  </Select.Content>
</Select.Root>

But yes, this isn't the default behavior. It needs a quick fix ASAP.

[gregmsanderson]

@FaeWulf Ah, yes, that's a good idea.

It looks like the original React one has max-h-96 on its inner div (which is presumably the Content one). So that prevents it getting too huge.