Merge pull request #1808 from AmruthPillai/1805-bugfont-subset-and-fo…

…nt-variants-not-working Add CommandList to Combobox component
AmruthPillai · Mar 11, 2024 · bbe8fb6 · bbe8fb6
2 parents 32445a5 + 6405102
commit bbe8fb6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 37 deletions.
diff --git a/libs/ui/src/components/combobox.tsx b/libs/ui/src/components/combobox.tsx
@@ -3,9 +3,15 @@ import { cn } from "@reactive-resume/utils";
 import { forwardRef, useState } from "react";
 
 import { Button } from "./button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "./command";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { ScrollArea } from "./scroll-area";
 
 export interface ComboboxOption {
   value: string;
@@ -93,43 +99,41 @@ export const Combobox = forwardRef(
               ref={ref}
               placeholder={props.searchPlaceholder ?? "Search for an option"}
             />
-            <CommandEmpty>{props.emptyText ?? "No results found"}</CommandEmpty>
-            <CommandGroup>
-              <ScrollArea orientation="vertical">
-                <div className="max-h-60">
-                  {props.options.map((option) => (
-                    <CommandItem
-                      key={option.value}
-                      value={option.value.toLowerCase().trim()}
-                      onSelect={(selectedValue) => {
-                        const option = props.options.find(
-                          (option) => option.value.toLowerCase().trim() === selectedValue,
-                        );
+            <CommandList>
+              <CommandEmpty>{props.emptyText ?? "No results found"}</CommandEmpty>
+              <CommandGroup>
+                {props.options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value.toLowerCase().trim()}
+                    onSelect={(selectedValue) => {
+                      const option = props.options.find(
+                        (option) => option.value.toLowerCase().trim() === selectedValue,
+                      );
 
-                        if (!option) return null;
+                      if (!option) return null;
 
-                        if (props.multiple) {
-                          handleMultipleSelect(props, option);
-                        } else {
-                          handleSingleSelect(props, option);
+                      if (props.multiple) {
+                        handleMultipleSelect(props, option);
+                      } else {
+                        handleSingleSelect(props, option);
 
-                          setOpen(false);
-                        }
-                      }}
-                    >
-                      <Check
-                        className={cn(
-                          "mr-2 size-4 opacity-0",
-                          !props.multiple && props.value === option.value && "opacity-100",
-                          props.multiple && props.value?.includes(option.value) && "opacity-100",
-                        )}
-                      />
-                      {option.label}
-                    </CommandItem>
-                  ))}
-                </div>
-              </ScrollArea>
-            </CommandGroup>
+                        setOpen(false);
+                      }
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 size-4 opacity-0",
+                        !props.multiple && props.value === option.value && "opacity-100",
+                        props.multiple && props.value?.includes(option.value) && "opacity-100",
+                      )}
+                    />
+                    {option.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
           </Command>
         </PopoverContent>
       </Popover>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@reactive-resume/source",
   "description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "license": "MIT",
   "private": true,
   "author": {