fix: command dropdown breaking (#2249)

formbricks · Mar 15, 2024 · 4704c4a · 4704c4a
1 parent 034ca1d
commit 4704c4a
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 89 deletions.
diff --git a/...web/app/(app)/environments/[environmentId]/settings/tags/components/MergeTagsCombobox.tsx b/...web/app/(app)/environments/[environmentId]/settings/tags/components/MergeTagsCombobox.tsx
@@ -1,7 +1,14 @@
 import { useState } from "react";
 
 import { Button } from "@formbricks/ui/Button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@formbricks/ui/Command";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@formbricks/ui/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 
 interface IMergeTagsComboboxProps {
@@ -36,24 +43,26 @@ const MergeTagsCombobox: React.FC<IMergeTagsComboboxProps> = ({ tags, onSelect }
               className="border-b border-none border-transparent shadow-none outline-0 ring-offset-transparent focus:border-none focus:border-transparent focus:shadow-none focus:outline-0 focus:ring-offset-transparent"
             />
           </div>
-          <CommandEmpty>
-            <div className="p-2 text-sm text-slate-500">No tag found</div>
-          </CommandEmpty>
-          <CommandGroup>
-            {tags?.length === 0 ? <CommandItem>No tags found</CommandItem> : null}
+          <CommandList>
+            <CommandEmpty>
+              <div className="p-2 text-sm text-slate-500">No tag found</div>
+            </CommandEmpty>
+            <CommandGroup>
+              {tags?.length === 0 ? <CommandItem>No tags found</CommandItem> : null}
 
-            {tags?.map((tag) => (
-              <CommandItem
-                key={tag.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? "" : currentValue);
-                  setOpen(false);
-                  onSelect(tag.value);
-                }}>
-                {tag.label}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+              {tags?.map((tag) => (
+                <CommandItem
+                  key={tag.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                    onSelect(tag.value);
+                  }}>
+                  {tag.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/...pp)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx b/...pp)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx
@@ -6,7 +6,7 @@ import * as React from "react";
 
 import useClickOutside from "@formbricks/lib/useClickOutside";
 import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import { Command, CommandEmpty, CommandGroup, CommandItem } from "@formbricks/ui/Command";
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@formbricks/ui/Command";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -143,23 +143,25 @@ const QuestionFilterComboBox = ({
         <div className="relative mt-2 h-full">
           {open && (
             <div className="animate-in bg-popover absolute top-0 z-10 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
-              <CommandEmpty>No result found.</CommandEmpty>
-              <CommandGroup>
-                {options?.map((o) => (
-                  <CommandItem
-                    onSelect={() => {
-                      !isMultiple
-                        ? onChangeFilterComboBoxValue(o)
-                        : onChangeFilterComboBoxValue(
-                            Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, o] : [o]
-                          );
-                      !isMultiple && setOpen(false);
-                    }}
-                    className="cursor-pointer">
-                    {o}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
+              <CommandList>
+                <CommandEmpty>No result found.</CommandEmpty>
+                <CommandGroup>
+                  {options?.map((o) => (
+                    <CommandItem
+                      onSelect={() => {
+                        !isMultiple
+                          ? onChangeFilterComboBoxValue(o)
+                          : onChangeFilterComboBoxValue(
+                              Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, o] : [o]
+                            );
+                        !isMultiple && setOpen(false);
+                      }}
+                      className="cursor-pointer">
+                      {o}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
             </div>
           )}
         </div>

diff --git a/...pp/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx b/...pp/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx
@@ -3,6 +3,8 @@
 import clsx from "clsx";
 import {
   CheckIcon,
+  ChevronDown,
+  ChevronUp,
   HashIcon,
   HelpCircleIcon,
   ImageIcon,
@@ -12,12 +14,18 @@ import {
   StarIcon,
   TagIcon,
 } from "lucide-react";
-import { ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 
 import useClickOutside from "@formbricks/lib/useClickOutside";
 import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@formbricks/ui/Command";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@formbricks/ui/Command";
 import { NetPromoterScoreIcon } from "@formbricks/ui/icons";
 
 export enum OptionsType {
@@ -127,27 +135,30 @@ const QuestionsComboBox = ({ options, selected, onChangeValue }: QuestionComboBo
       <div className="relative mt-2 h-full">
         {open && (
           <div className="animate-in bg-popover absolute top-0 z-50 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
-            <CommandEmpty>No result found.</CommandEmpty>
-            {options?.map((data) => (
-              <>
-                {data?.option.length > 0 && (
-                  <CommandGroup heading={<p className="text-sm font-normal text-slate-600">{data.header}</p>}>
-                    {data?.option?.map((o, i) => (
-                      <CommandItem
-                        key={`${o.label}-${i}`}
-                        onSelect={() => {
-                          setInputValue("");
-                          onChangeValue(o);
-                          setOpen(false);
-                        }}
-                        className="cursor-pointer">
-                        <SelectedCommandItem label={o.label} type={o.type} questionType={o.questionType} />
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                )}
-              </>
-            ))}
+            <CommandList>
+              <CommandEmpty>No result found.</CommandEmpty>
+              {options?.map((data) => (
+                <>
+                  {data?.option.length > 0 && (
+                    <CommandGroup
+                      heading={<p className="text-sm font-normal text-slate-600">{data.header}</p>}>
+                      {data?.option?.map((o, i) => (
+                        <CommandItem
+                          key={`${o.label}-${i}`}
+                          onSelect={() => {
+                            setInputValue("");
+                            onChangeValue(o);
+                            setOpen(false);
+                          }}
+                          className="cursor-pointer">
+                          <SelectedCommandItem label={o.label} type={o.type} questionType={o.questionType} />
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  )}
+                </>
+              ))}
+            </CommandList>
           </div>
         )}
       </div>

diff --git a/packages/ui/Command/index.tsx b/packages/ui/Command/index.tsx
@@ -106,7 +106,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none hover:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none hover:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}

diff --git a/packages/ui/TagsCombobox/index.tsx b/packages/ui/TagsCombobox/index.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useMemo } from "react";
 
 import { Button } from "../Button";
-import { Command, CommandGroup, CommandInput, CommandItem } from "../Command";
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from "../Command";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover";
 
 interface ITagsComboboxProps {
@@ -91,34 +91,36 @@ const TagsCombobox: React.FC<ITagsComboboxProps> = ({
               }}
             />
           </div>
-          <CommandGroup>
-            {tagsToSearch?.map((tag) => {
-              return (
-                <CommandItem
-                  key={tag.value}
-                  value={tag.value}
-                  onSelect={(currentValue) => {
-                    setOpen(false);
-                    addTag(currentValue);
-                  }}
-                  className="hover:cursor-pointer hover:bg-slate-50">
-                  {tag.label}
-                </CommandItem>
-              );
-            })}
-            {searchValue !== "" &&
-              !currentTags.find((tag) => tag.label === searchValue) &&
-              !tagsToSearch.find((tag) => tag.label === searchValue) && (
-                <CommandItem value="_create">
-                  <button
-                    onClick={() => createTag?.(searchValue)}
-                    className="h-8 w-full text-left hover:cursor-pointer hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={!!currentTags.find((tag) => tag.label === searchValue)}>
-                    + Add {searchValue}
-                  </button>
-                </CommandItem>
-              )}
-          </CommandGroup>
+          <CommandList>
+            <CommandGroup>
+              {tagsToSearch?.map((tag) => {
+                return (
+                  <CommandItem
+                    key={tag.value}
+                    value={tag.value}
+                    onSelect={(currentValue) => {
+                      setOpen(false);
+                      addTag(currentValue);
+                    }}
+                    className="hover:cursor-pointer hover:bg-slate-50">
+                    {tag.label}
+                  </CommandItem>
+                );
+              })}
+              {searchValue !== "" &&
+                !currentTags.find((tag) => tag.label === searchValue) &&
+                !tagsToSearch.find((tag) => tag.label === searchValue) && (
+                  <CommandItem value="_create">
+                    <button
+                      onClick={() => createTag?.(searchValue)}
+                      className="h-8 w-full text-left hover:cursor-pointer hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                      disabled={!!currentTags.find((tag) => tag.label === searchValue)}>
+                      + Add {searchValue}
+                    </button>
+                  </CommandItem>
+                )}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>