feat: add searchable dropdown with Popover + Command pattern

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.
This commit is contained in:
dwindown
2026-04-28 16:45:06 +07:00
parent 008188b790
commit 7a6765a579
8 changed files with 538 additions and 14 deletions

View File

@@ -12,16 +12,18 @@ function PopoverTrigger({ ...props }) {
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
return (
<PopoverPrimitive.Portal>
<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 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>
);
}