mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-04 10:30:00 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

6095/fix wrapped the fallback-input in DropdownMenu

Browse Source
This commit is contained in:
Abhishek Sharma
2025-07-03 14:53:55 +05:30
parent e883e22d26
commit 313fd3f214
1 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,9 @@
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 } from "react";
import { toast } from "react-hot-toast";
@@ -27,50 +32,58 @@ export const FallbackInput = ({
);
};
return (
<div className="absolute top-10 z-10 mt-1 rounded-md border border-slate-300 bg-slate-50 p-3 text-xs">
<p className="font-medium">Add a placeholder to show if the question gets skipped:</p>
{filteredRecallItems.map((recallItem) => {
if (!recallItem) return;
return (
<div className="mt-2 flex flex-col" key={recallItem.id}>
<div className="flex items-center">
<Input
className="placeholder:text-md h-full bg-white"
ref={fallbackInputRef}
id="fallback"
value={fallbacks[recallItem.id]?.replaceAll("nbsp", " ")}
placeholder={"Fallback for " + recallItem.label}
onKeyDown={(e) => {
if (e.key == "Enter") {
e.preventDefault();
if (containsEmptyFallback()) {
toast.error("Fallback missing");
return;
<DropdownMenu defaultOpen={true} modal={false}>
<DropdownMenuTrigger className="z-10 cursor-pointer" asChild>
<div className="flex h-0 w-full items-center justify-between overflow-hidden" />
</DropdownMenuTrigger>
<DropdownMenuContent
className="z-[9999] w-auto border-slate-300 bg-slate-50 p-3 text-xs shadow-lg"
align="start"
side="bottom">
<p className="font-medium">Add a placeholder to show if the question gets skipped:</p>
{filteredRecallItems.map((recallItem) => {
if (!recallItem) return;
return (
<div className="mt-2 flex flex-col" key={recallItem.id}>
<div className="flex items-center">
<Input
className="placeholder:text-md h-full bg-white"
ref={fallbackInputRef}
id="fallback"
value={fallbacks[recallItem.id]?.replaceAll("nbsp", " ")}
placeholder={"Fallback for " + recallItem.label}
onKeyDown={(e) => {
if (e.key == "Enter") {
e.preventDefault();
if (containsEmptyFallback()) {
toast.error("Fallback missing");
return;
}
addFallback();
}
addFallback();
}
}}
onChange={(e) => {
const newFallbacks = { ...fallbacks };
newFallbacks[recallItem.id] = e.target.value;
setFallbacks(newFallbacks);
}}
/>
}}
onChange={(e) => {
const newFallbacks = { ...fallbacks };
newFallbacks[recallItem.id] = e.target.value;
setFallbacks(newFallbacks);
}}
/>
</div>
</div>
</div>
);
})}
<div className="flex w-full justify-end">
<Button
className="mt-2 h-full py-2"
disabled={containsEmptyFallback()}
onClick={(e) => {
e.preventDefault();
addFallback();
}}>
Add
</Button>
</div>
</div>
);
})}
<div className="flex w-full justify-end">
<Button
className="mt-2 h-full py-2"
disabled={containsEmptyFallback()}
onClick={(e) => {
e.preventDefault();
addFallback();
}}>
Add
</Button>
</div>
</DropdownMenuContent>
</DropdownMenu>
);
};