Feature : Toggle Multi-Select and Single-Select Question Types

formbricks · Aug 5, 2023 · 5c9605f · 5c9605f · vercel · Aug 5, 2023
2 parents ad42f4c + de3d580
commit 5c9605f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/...pp/(app)/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx b/...pp/(app)/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx
@@ -223,6 +223,15 @@ export default function MultipleChoiceMultiForm({
                 Add &quot;Other&quot;
               </Button>
             )}
+            <Button
+              size="sm"
+              variant="minimal"
+              type="button"
+              onClick={() => {
+                updateQuestion(questionIdx, { type: "multipleChoiceSingle" });
+              }}>
+              Convert to Single Select
+            </Button>
 
             <div className="flex flex-1 items-center justify-end gap-2">
               <Select

diff --git a/...p/(app)/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx b/...p/(app)/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx
@@ -223,6 +223,15 @@ export default function MultipleChoiceSingleForm({
                 Add &quot;Other&quot;
               </Button>
             )}
+            <Button
+              size="sm"
+              variant="minimal"
+              type="button"
+              onClick={() => {
+                updateQuestion(questionIdx, { type: "multipleChoiceMulti" });
+              }}>
+              Convert to Multi Select
+            </Button>
 
             <div className="flex flex-1 items-center justify-end gap-2">
               <Select

diff --git a/apps/web/components/preview/MultipleChoiceMultiQuestion.tsx b/apps/web/components/preview/MultipleChoiceMultiQuestion.tsx
@@ -39,7 +39,8 @@ export default function MultipleChoiceMultiQuestion({
     .map((choice) => choice.label);
 
   useEffect(() => {
-    const nonOtherSavedChoices = storedResponseValue?.filter((answer) =>
+    if(Array.isArray(storedResponseValue)){
+      const nonOtherSavedChoices = storedResponseValue?.filter((answer) =>
       nonOtherChoiceLabels.includes(answer)
     );
     const savedOtherSpecified = storedResponseValue?.find((answer) => !nonOtherChoiceLabels.includes(answer));
@@ -50,6 +51,7 @@ export default function MultipleChoiceMultiQuestion({
       setOtherSpecified(savedOtherSpecified);
       setShowOther(true);
     }
+  }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [storedResponseValue, question.id]);