fix combobox-advanced

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-08-11 23:33:47 +02:00
parent c82247143c
commit 9fcc31319d
2 changed files with 18 additions and 3 deletions

View File

@@ -5,6 +5,21 @@ import { cn } from '@/utils/cn';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
export const DumpCheckbox = ({ checked }: { checked: boolean }) => {
return (
<div
className={cn(
'block h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
checked && 'bg-primary text-primary-foreground'
)}
>
<div className="flex items-center justify-center text-current">
{checked && <Check className="h-4 w-4" />}
</div>
</div>
);
};
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>

View File

@@ -7,7 +7,7 @@ import VirtualList from 'rc-virtual-list';
import { useOnClickOutside } from 'usehooks-ts';
import { Button } from './button';
import { Checkbox } from './checkbox';
import { Checkbox, DumpCheckbox } from './checkbox';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
type IValue = any;
@@ -61,7 +61,7 @@ export function ComboboxAdvanced({
}}
className={'flex cursor-pointer items-center gap-2'}
>
<Checkbox checked={checked} className="pointer-events-none" />
<DumpCheckbox checked={checked} />
{item?.label ?? item?.value}
</CommandItem>
);
@@ -99,7 +99,7 @@ export function ComboboxAdvanced({
<Button
variant={'outline'}
onClick={() => setOpen((prev) => !prev)}
className={cn('h-min-10 h-auto', className)}
className={cn('h-auto min-h-10 py-2', className)}
>
<div className="flex w-full flex-wrap gap-1">
{value.length === 0 && placeholder}