fix(ui): restore searchable-select dropdown scrolling

- replace the popover list scroll area with a native overflow container

- keep keyboard navigation behavior while restoring wheel scroll in long dropdowns
This commit is contained in:
Tam Nhu Tran
2026-04-08 18:02:05 -04:00
parent 87f00c524d
commit a70eae558e
2 changed files with 16 additions and 3 deletions
+6 -3
View File
@@ -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({
</div>
</div>
<ScrollArea className="max-h-72">
<div
data-slot="searchable-select-scroll-container"
data-testid="searchable-select-scroll-container"
className="max-h-72 overflow-y-auto overscroll-contain"
>
{filteredOptions.length === 0 ? (
<div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</div>
) : (
@@ -331,7 +334,7 @@ export function SearchableSelect({
))}
</div>
)}
</ScrollArea>
</div>
</PopoverContent>
</Popover>
);
@@ -122,6 +122,16 @@ describe('SearchableSelect', () => {
});
});
it('renders options inside a native overflow container so wheel scrolling works', async () => {
render(<SearchableSelectHarness />);
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(<SearchableSelectHarness />);