add virtual list for combobox

apps/dashboard/src/components/ui/combobox-advanced.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { Badge } from '@/components/ui/badge';
-import {
-  Command,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
+import { Command, CommandInput, CommandItem } from '@/components/ui/command';
+import { cn } from '@/utils/cn';
 import { ChevronsUpDownIcon } from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
 import { useOnClickOutside } from 'usehooks-ts';
 
 import { Button } from './button';
@@ -71,10 +67,31 @@ export function ComboboxAdvanced({
     );
   };
 
-  const renderUnknownItem = (value: IValue) => {
-    const item = items.find((item) => item.value === value);
-    return item ? renderItem(item) : renderItem({ value, label: value });
-  };
+  const data = React.useMemo(() => {
+    return [
+      ...(inputValue === ''
+        ? []
+        : [
+            {
+              value: inputValue,
+              label: `Pick '${inputValue}'`,
+            },
+          ]),
+      ...value.map((val) => {
+        const item = items.find((item) => item.value === val);
+        return item
+          ? {
+              value: val,
+              label: item.label,
+            }
+          : {
+              value: val,
+              label: val,
+            };
+      }),
+      ...selectables,
+    ].filter((item) => item.value);
+  }, [inputValue, selectables, items]);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -82,7 +99,7 @@ export function ComboboxAdvanced({
         <Button
           variant={'outline'}
           onClick={() => setOpen((prev) => !prev)}
-          className={className}
+          className={cn('h-min-10 h-auto', className)}
         >
           <div className="flex w-full flex-wrap gap-1">
             {value.length === 0 && placeholder}
@@ -104,15 +121,9 @@ export function ComboboxAdvanced({
             value={inputValue}
             onValueChange={setInputValue}
           />
-          <CommandList>
-            {inputValue !== '' &&
-              renderItem({
-                value: inputValue,
-                label: `Pick '${inputValue}'`,
-              })}
-            {value.map(renderUnknownItem)}
-            {selectables.map(renderItem)}
-          </CommandList>
+          <VirtualList height={300} data={data} itemHeight={32} itemKey="value">
+            {renderItem}
+          </VirtualList>
         </Command>
       </PopoverContent>
     </Popover>

apps/dashboard/src/components/ui/combobox.tsx

@@ -6,7 +6,6 @@ import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
-  CommandGroup,
   CommandInput,
   CommandItem,
 } from '@/components/ui/command';
@@ -18,6 +17,7 @@ import {
 import { cn } from '@/utils/cn';
 import type { LucideIcon } from 'lucide-react';
 import { Check, ChevronsUpDown } from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
 
 export interface ComboboxProps<T> {
   placeholder: string;
@@ -123,30 +123,33 @@ export function Combobox<T extends string>({
           ) : (
             <CommandEmpty>Nothing selected</CommandEmpty>
           )}
-          <div className="over-x-hidden max-h-[300px] overflow-y-auto">
-            <CommandGroup>
-              {items.map((item) => (
-                <CommandItem
-                  key={item.value}
-                  value={item.value}
-                  onSelect={(currentValue) => {
-                    const value = find(currentValue)?.value ?? currentValue;
-                    onChange(value as T);
-                    setOpen(false);
-                  }}
-                  {...(item.disabled && { disabled: true })}
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4 flex-shrink-0',
-                      value === item.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {item.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </div>
+          <VirtualList
+            height={300}
+            data={items}
+            itemHeight={32}
+            itemKey="value"
+          >
+            {(item) => (
+              <CommandItem
+                key={item.value}
+                value={item.value}
+                onSelect={(currentValue) => {
+                  const value = find(currentValue)?.value ?? currentValue;
+                  onChange(value as T);
+                  setOpen(false);
+                }}
+                {...(item.disabled && { disabled: true })}
+              >
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4 flex-shrink-0',
+                    value === item.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {item.label}
+              </CommandItem>
+            )}
+          </VirtualList>
         </Command>
       </PopoverContent>
     </Popover>