fix(fe): add CommandList (#1663)

skkuding · May 6, 2024 · b6a990b · b6a990b
1 parent 9fe4048
commit b6a990b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 59 deletions.
diff --git a/apps/frontend/app/admin/_components/GroupSelect.tsx b/apps/frontend/app/admin/_components/GroupSelect.tsx
@@ -5,7 +5,8 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandItem
+  CommandItem,
+  CommandList
 } from '@/components/ui/command'
 import {
   Popover,
@@ -56,28 +57,30 @@ export default function GroupSelect() {
       </PopoverTrigger>
       <PopoverContent className="mx-2 w-48 p-0 font-semibold">
         <Command>
-          <CommandEmpty>No group found.</CommandEmpty>
-          <CommandGroup>
-            {groups.map((framework) => (
-              <CommandItem
-                key={framework.id}
-                value={framework.id}
-                className="text-slate-600"
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? '' : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    value === framework.id ? 'opacity-100' : 'opacity-0'
-                  )}
-                />
-                {framework.label}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>No group found.</CommandEmpty>
+            <CommandGroup>
+              {groups.map((framework) => (
+                <CommandItem
+                  key={framework.id}
+                  value={framework.id}
+                  className="text-slate-600"
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === framework.id ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/apps/frontend/components/CheckboxSelect.tsx b/apps/frontend/components/CheckboxSelect.tsx
@@ -7,7 +7,8 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandItem
+  CommandItem,
+  CommandList
 } from '@/components/ui/command'
 import {
   Popover,
@@ -91,18 +92,20 @@ export default function LanguageSelect<T extends string>({
 
       <PopoverContent className="w-[115px] p-0" align="start">
         <Command>
-          <CommandEmpty>No language found.</CommandEmpty>
-          <CommandGroup>
-            {options.map((option) => (
-              <CommandItem key={option} value={option} className="gap-x-2">
-                <Checkbox
-                  checked={selectedValues.includes(option)}
-                  onCheckedChange={() => handleCheckboxChange(option)}
-                ></Checkbox>
-                {option}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>No language found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem key={option} value={option} className="gap-x-2">
+                  <Checkbox
+                    checked={selectedValues.includes(option)}
+                    onCheckedChange={() => handleCheckboxChange(option)}
+                  ></Checkbox>
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/apps/frontend/components/DataTableLangFilter.tsx b/apps/frontend/components/DataTableLangFilter.tsx
@@ -5,7 +5,8 @@ import {
   Command,
   CommandEmpty,
   CommandGroup,
-  CommandItem
+  CommandItem,
+  CommandList
 } from '@/components/ui/command'
 import {
   Popover,
@@ -73,28 +74,30 @@ export default function DataTableLangFilter<TData, TValue>({
 
       <PopoverContent className="w-[115px] p-0" align="start">
         <Command>
-          <CommandEmpty>No language found.</CommandEmpty>
-          <CommandGroup>
-            {options.map((option) => (
-              <CommandItem key={option} value={option} className="gap-x-2">
-                <Checkbox
-                  checked={selectedValues.has(option)}
-                  onCheckedChange={() => {
-                    if (selectedValues.has(option)) {
-                      selectedValues.delete(option)
-                    } else {
-                      selectedValues.add(option)
-                    }
-                    const filterValues = Array.from(selectedValues)
-                    column?.setFilterValue(
-                      filterValues.length ? filterValues : undefined
-                    )
-                  }}
-                />
-                {option}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>No language found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem key={option} value={option} className="gap-x-2">
+                  <Checkbox
+                    checked={selectedValues.has(option)}
+                    onCheckedChange={() => {
+                      if (selectedValues.has(option)) {
+                        selectedValues.delete(option)
+                      } else {
+                        selectedValues.add(option)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                  />
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>