From 16cbc3365b9778b325198af1ee0e556762069176 Mon Sep 17 00:00:00 2001
From: Shubham Palriwala <spalriwalau@gmail.com>
Date: Tue, 30 Jan 2024 14:51:01 +0530
Subject: [PATCH] feat: custom placeholder label for other option in single &
 multi select (#1971)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
---
 .../components/MultipleChoiceMultiForm.tsx    | 59 +++++++++++-------
 .../components/MultipleChoiceSingleForm.tsx   | 61 ++++++++++++-------
 .../questions/MultipleChoiceMultiQuestion.tsx |  2 +-
 .../MultipleChoiceSingleQuestion.tsx          |  2 +-
 packages/types/surveys.ts                     |  2 +
 5 files changed, 79 insertions(+), 47 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx
index c2e868f7a1..bf4913f25b 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx
@@ -217,29 +217,44 @@ export default function MultipleChoiceMultiForm({
           {question.choices &&
             question.choices.map((choice, choiceIdx) => (
               <div key={choiceIdx} className="inline-flex w-full items-center">
-                <Input
-                  ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
-                  id={choice.id}
-                  name={choice.id}
-                  value={choice.label}
-                  className={cn(choice.id === "other" && "border-dashed")}
-                  placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
-                  onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
-                  onBlur={() => {
-                    const duplicateLabel = findDuplicateLabel();
-                    if (duplicateLabel) {
-                      setisInvalidValue(duplicateLabel);
-                    } else if (findEmptyLabel()) {
-                      setisInvalidValue("");
-                    } else {
-                      setisInvalidValue(null);
+                <div className="flex w-full space-x-2">
+                  <Input
+                    ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
+                    id={choice.id}
+                    name={choice.id}
+                    value={choice.label}
+                    className={cn(choice.id === "other" && "border-dashed")}
+                    placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
+                    onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
+                    onBlur={() => {
+                      const duplicateLabel = findDuplicateLabel();
+                      if (duplicateLabel) {
+                        setisInvalidValue(duplicateLabel);
+                      } else if (findEmptyLabel()) {
+                        setisInvalidValue("");
+                      } else {
+                        setisInvalidValue(null);
+                      }
+                    }}
+                    isInvalid={
+                      (isInvalidValue === "" && choice.label.trim() === "") ||
+                      (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
                     }
-                  }}
-                  isInvalid={
-                    (isInvalidValue === "" && choice.label.trim() === "") ||
-                    (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
-                  }
-                />
+                  />
+                  {choice.id === "other" && (
+                    <Input
+                      id="otherInputLabel"
+                      name="otherInputLabel"
+                      value={question.otherOptionPlaceholder ?? "Please specify"}
+                      placeholder={question.otherOptionPlaceholder ?? "Please specify"}
+                      className={cn(choice.id === "other" && "border-dashed")}
+                      onChange={(e) => {
+                        if (e.target.value.trim() == "") e.target.value = "";
+                        updateQuestion(questionIdx, { otherOptionPlaceholder: e.target.value });
+                      }}
+                    />
+                  )}
+                </div>
                 {question.choices && question.choices.length > 2 && (
                   <TrashIcon
                     className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx
index 1a5fdde5d0..8c89e052ff 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx
@@ -216,30 +216,45 @@ export default function MultipleChoiceSingleForm({
         <div className="mt-2 space-y-2" id="choices">
           {question.choices &&
             question.choices.map((choice, choiceIdx) => (
-              <div key={choiceIdx} className="inline-flex w-full items-center">
-                <Input
-                  ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
-                  id={choice.id}
-                  name={choice.id}
-                  value={choice.label}
-                  className={cn(choice.id === "other" && "border-dashed")}
-                  placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
-                  onBlur={() => {
-                    const duplicateLabel = findDuplicateLabel();
-                    if (duplicateLabel) {
-                      setisInvalidValue(duplicateLabel);
-                    } else if (findEmptyLabel()) {
-                      setisInvalidValue("");
-                    } else {
-                      setisInvalidValue(null);
+              <div key={choiceIdx} className="flex w-full items-center">
+                <div className="flex w-full space-x-2">
+                  <Input
+                    ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
+                    id={choice.id}
+                    name={choice.id}
+                    value={choice.label}
+                    className={cn(choice.id === "other" && "border-dashed")}
+                    placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
+                    onBlur={() => {
+                      const duplicateLabel = findDuplicateLabel();
+                      if (duplicateLabel) {
+                        setisInvalidValue(duplicateLabel);
+                      } else if (findEmptyLabel()) {
+                        setisInvalidValue("");
+                      } else {
+                        setisInvalidValue(null);
+                      }
+                    }}
+                    onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
+                    isInvalid={
+                      (isInvalidValue === "" && choice.label.trim() === "") ||
+                      (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
                     }
-                  }}
-                  onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
-                  isInvalid={
-                    (isInvalidValue === "" && choice.label.trim() === "") ||
-                    (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
-                  }
-                />
+                  />
+                  {choice.id === "other" && (
+                    <Input
+                      id="otherInputLabel"
+                      name="otherInputLabel"
+                      value={question.otherOptionPlaceholder ?? "Please specify"}
+                      placeholder={question.otherOptionPlaceholder ?? "Please specify"}
+                      className={cn(choice.id === "other" && "border-dashed")}
+                      onChange={(e) => {
+                        if (e.target.value.trim() == "") e.target.value = "";
+                        updateQuestion(questionIdx, { otherOptionPlaceholder: e.target.value });
+                      }}
+                    />
+                  )}
+                </div>
                 {question.choices && question.choices.length > 2 && (
                   <TrashIcon
                     className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
diff --git a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
index 3d9fa6e1e6..a96d039d61 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
@@ -231,7 +231,7 @@ export default function MultipleChoiceMultiQuestion({
                         }, 100);
                       }
                     }}
-                    placeholder="Please specify"
+                    placeholder={question.otherOptionPlaceholder ?? "Please specify"}
                     className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus mt-3 flex h-10 w-full rounded-md border px-3 py-2 text-sm  focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     required={question.required}
                     aria-labelledby={`${otherOption.id}-label`}
diff --git a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
index 38c0efae64..bd68f5c6a4 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
@@ -182,7 +182,7 @@ export default function MultipleChoiceSingleQuestion({
                         }, 100);
                       }
                     }}
-                    placeholder="Please specify"
+                    placeholder={question.otherOptionPlaceholder ?? "Please specify"}
                     className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus mt-3 flex h-10 w-full rounded-md border px-3 py-2 text-sm  focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     required={question.required}
                     aria-labelledby={`${otherOption.id}-label`}
diff --git a/packages/types/surveys.ts b/packages/types/surveys.ts
index 32f56c8c60..e22f253039 100644
--- a/packages/types/surveys.ts
+++ b/packages/types/surveys.ts
@@ -277,6 +277,7 @@ export const ZSurveyMultipleChoiceSingleQuestion = ZSurveyQuestionBase.extend({
   choices: z.array(ZSurveyChoice),
   logic: z.array(ZSurveyMultipleChoiceSingleLogic).optional(),
   shuffleOption: z.enum(["none", "all", "exceptLast"]).optional(),
+  otherOptionPlaceholder: z.string().optional(),
 });
 
 export type TSurveyMultipleChoiceSingleQuestion = z.infer<typeof ZSurveyMultipleChoiceSingleQuestion>;
@@ -286,6 +287,7 @@ export const ZSurveyMultipleChoiceMultiQuestion = ZSurveyQuestionBase.extend({
   choices: z.array(ZSurveyChoice),
   logic: z.array(ZSurveyMultipleChoiceMultiLogic).optional(),
   shuffleOption: z.enum(["none", "all", "exceptLast"]).optional(),
+  otherOptionPlaceholder: z.string().optional(),
 });
 
 export type TSurveyMultipleChoiceMultiQuestion = z.infer<typeof ZSurveyMultipleChoiceMultiQuestion>;