dropdown replaced with popover

apps/web/modules/survey/components/question-form-input/components/fallback-input.tsx

@@ -1,11 +1,7 @@
 import { Button } from "@/modules/ui/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
 import { Input } from "@/modules/ui/components/input";
-import { RefObject, useEffect, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { RefObject, useState } from "react";
 import { toast } from "react-hot-toast";
 import { TSurveyRecallItem } from "@formbricks/types/surveys/types";
 
@@ -26,42 +22,34 @@ export const FallbackInput = ({
 }: FallbackInputProps) => {
   const [open, setOpen] = useState(true);
 
-  // Prevent dropdown from closing when clicking outside
-  const handleOpenChange = (isOpen: boolean) => {
-    if (isOpen === false) {
-      setOpen(true);
-    } else {
-      setOpen(isOpen);
-    }
+  const containsEmptyFallback = () => {
+    const fallBacksList = Object.values(fallbacks);
+    return fallBacksList.length === 0 || fallBacksList.map((value) => value.trim()).includes("");
   };
 
-  useEffect(() => {
-    setOpen(true);
-  }, []);
-
-  const containsEmptyFallback = () => {
-    return (
-      Object.values(fallbacks)
-        .map((value) => value.trim())
-        .includes("") || Object.entries(fallbacks).length === 0
-    );
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen && containsEmptyFallback()) return;
+    setOpen(isOpen);
   };
 
   return (
-    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
-      <DropdownMenuTrigger className="z-10 cursor-pointer" asChild>
-        <div className="flex h-0 w-full items-center justify-between overflow-hidden" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-auto border-slate-300 bg-slate-50 p-3 text-xs shadow-lg"
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <div className="z-10 h-0 w-full cursor-pointer" />
+      </PopoverTrigger>
+
+      <PopoverContent
+        className="w-auto border border-slate-300 bg-slate-50 p-3 text-xs shadow-lg"
         align="start"
-        side="bottom">
+        side="bottom"
+        sideOffset={4}>
         <p className="font-medium">Add a placeholder to show if the question gets skipped:</p>
-        {filteredRecallItems.map((recallItem, idx) => {
-          if (!recallItem) return;
-          return (
-            <div className="mt-2 flex flex-col" key={recallItem.id}>
-              <div className="flex items-center">
+
+        <div className="mt-2 space-y-2 pr-1">
+          {filteredRecallItems.map((recallItem, idx) => {
+            if (!recallItem) return null;
+            return (
+              <div key={recallItem.id} className="flex flex-col">
                 <Input
                   className="placeholder:text-md h-full bg-white"
                   ref={idx === 0 ? fallbackInputRef : undefined}
@@ -69,7 +57,7 @@ export const FallbackInput = ({
                   value={fallbacks[recallItem.id]?.replaceAll("nbsp", " ")}
                   placeholder={"Fallback for " + recallItem.label}
                   onKeyDown={(e) => {
-                    if (e.key == "Enter") {
+                    if (e.key === "Enter") {
                       e.preventDefault();
                       if (containsEmptyFallback()) {
                         toast.error("Fallback missing");
@@ -86,9 +74,10 @@ export const FallbackInput = ({
                   }}
                 />
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
+
         <div className="flex w-full justify-end">
           <Button
             className="mt-2 h-full py-2"
@@ -101,7 +90,7 @@ export const FallbackInput = ({
             Add
           </Button>
         </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </PopoverContent>
+    </Popover>
   );
 };