refactor(form): use shadcn native combobox to replace customise combobox

src/components/road-combobox.tsx

@@ -1,21 +1,15 @@
 "use client";
 
-import { useState } from "react";
 import type { Road } from "@/lib/types";
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronsUpDown, Loader2 } from "lucide-react";
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import { Loader2 } from "lucide-react";
 
 interface RoadComboboxProps {
   roads: Road[];
@@ -32,54 +26,45 @@ export function RoadCombobox({
   disabled,
   loading,
 }: RoadComboboxProps) {
-  const [open, setOpen] = useState(false);
-
   return (
     <div className="space-y-1.5">
       <label className="text-muted-foreground text-[11px] font-medium">
         {"路/街"}
       </label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger
-          disabled={disabled || loading}
-          className="border-input focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex h-8 w-full items-center justify-between rounded-lg border bg-transparent px-2.5 text-base transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50"
+      {loading ? (
+        <div className="border-input dark:bg-input/30 flex h-8 w-full items-center gap-2 rounded-lg border bg-transparent px-2.5">
+          <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+          <span className="text-muted-foreground text-base">{"載入中..."}</span>
+        </div>
+      ) : (
+        <Combobox
+          items={roads}
+          value={value}
+          onValueChange={(val) => {
+            onChange(val ?? null);
+          }}
+          itemToStringLabel={(road) => road.name}
+          filter={(road, query) => {
+            const q = query.toLowerCase();
+            return (
+              road.name.toLowerCase().includes(q) ||
+              road.en.toLowerCase().includes(q)
+            );
+          }}
         >
-          {loading ? (
-            <span className="text-muted-foreground flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {"載入中..."}
-            </span>
-          ) : value ? (
-            <span className="truncate text-left">{value.name}</span>
-          ) : (
-            <span className="text-muted-foreground">{"請選擇路/街..."}</span>
-          )}
-          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-40" />
-        </PopoverTrigger>
-        <PopoverContent className="w-(--anchor-width) p-0">
-          <Command>
-            <CommandInput placeholder={"搜尋路街名稱..."} />
-            <CommandList>
-              <CommandEmpty>{"查無結果"}</CommandEmpty>
-              <CommandGroup>
-                {roads.map((road) => (
-                  <CommandItem
-                    key={road.name}
-                    value={`${road.name} ${road.en}`}
-                    onSelect={() => {
-                      onChange(road);
-                      setOpen(false);
-                    }}
-                    data-checked={value?.name === road.name ? true : undefined}
-                  >
-                    {road.name}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
+          <ComboboxInput placeholder={"請選擇路/街..."} disabled={disabled} />
+          <ComboboxContent>
+            <ComboboxEmpty>{"查無結果"}</ComboboxEmpty>
+            <ComboboxList>
+              {(road: Road) => (
+                <ComboboxItem key={road.name} value={road}>
+                  {road.name}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      )}
     </div>
   );
 }