mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-02 14:19:56 +00:00
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:
@@ -5,7 +5,6 @@ import { cn } from '@/lib/utils';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
|
|
||||||
export interface SearchableSelectGroup {
|
export interface SearchableSelectGroup {
|
||||||
key: string;
|
key: string;
|
||||||
@@ -280,7 +279,11 @@ export function SearchableSelect({
|
|||||||
</div>
|
</div>
|
||||||
</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 ? (
|
{filteredOptions.length === 0 ? (
|
||||||
<div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</div>
|
<div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -331,7 +334,7 @@ export function SearchableSelect({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</div>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</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 () => {
|
it('opens from the trigger with arrow keys', async () => {
|
||||||
render(<SearchableSelectHarness />);
|
render(<SearchableSelectHarness />);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user