7a6765a579
Rewrite SelectField to use shadcn/ui Popover + Command (cmdk) pattern for searchable selects, following best practices. This eliminates console errors from the previous input-inside-SelectContent approach. Changes: - SelectField.js: Use Popover + Command for searchable fields - Add Command component with CommandInput for proper search - Update dialog.jsx to use Huge Icons instead of lucide-react - Simplify searchable logic to follow PHP config directly The Command component handles keyboard navigation and filtering properly without focus event conflicts.
32 lines
1.4 KiB
JavaScript
32 lines
1.4 KiB
JavaScript
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function Popover({ ...props }) {
|
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
|
}
|
|
|
|
function PopoverTrigger({ ...props }) {
|
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
|
}
|
|
|
|
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
return (
|
|
<PopoverPrimitive.Portal>
|
|
<div className="formipay-design-system">
|
|
<PopoverPrimitive.Content
|
|
data-slot="popover-content"
|
|
align={align}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
</PopoverPrimitive.Portal>
|
|
);
|
|
}
|
|
|
|
export { Popover, PopoverTrigger, PopoverContent };
|