diff --git a/ui/src/components/ui/searchable-select.tsx b/ui/src/components/ui/searchable-select.tsx index 9da3602e..b971bb0f 100644 --- a/ui/src/components/ui/searchable-select.tsx +++ b/ui/src/components/ui/searchable-select.tsx @@ -5,7 +5,6 @@ import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; -import { ScrollArea } from '@/components/ui/scroll-area'; export interface SearchableSelectGroup { key: string; @@ -280,7 +279,11 @@ export function SearchableSelect({ - + {filteredOptions.length === 0 ? ( {emptyText} ) : ( @@ -331,7 +334,7 @@ export function SearchableSelect({ ))} )} - + ); diff --git a/ui/tests/unit/components/ui/searchable-select.test.tsx b/ui/tests/unit/components/ui/searchable-select.test.tsx index 4eafc880..ead6a743 100644 --- a/ui/tests/unit/components/ui/searchable-select.test.tsx +++ b/ui/tests/unit/components/ui/searchable-select.test.tsx @@ -122,6 +122,16 @@ describe('SearchableSelect', () => { }); }); + it('renders options inside a native overflow container so wheel scrolling works', async () => { + render(); + + await userEvent.click(screen.getByRole('button', { name: 'Select model' })); + + const scrollContainer = await screen.findByTestId('searchable-select-scroll-container'); + expect(scrollContainer).toHaveClass('max-h-72'); + expect(scrollContainer).toHaveClass('overflow-y-auto'); + }); + it('opens from the trigger with arrow keys', async () => { render();