Fix multiple NPS questions in one survey not working (#596)

* clear nps question on submit

* fix onboarding color picker

* update onChange to onClick for NPS Questions

* update border color

* remove console.log

---------

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/ResponseFilter.tsx

@@ -126,7 +126,7 @@ const ResponseFilter = () => {
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded border border-slate-200 bg-slate-100 p-3 text-sm text-slate-600 sm:min-w-[11rem] sm:px-6 sm:py-3">
+      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded border border-slate-200 bg-slate-100 p-3 text-sm text-slate-600 hover:border-slate-300 sm:min-w-[11rem] sm:px-6 sm:py-3">
         Filter {selectedFilter.filter.length > 0 && `(${selectedFilter.filter.length})`}
         <div className="ml-3">
           {isOpen ? (

apps/web/components/preview/NPSQuestion.tsx

@@ -18,6 +18,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
   const handleSelect = (number: number) => {
     setSelectedChoice(number);
     if (question.required) {
+      setSelectedChoice(null);
       onSubmit({
         [question.id]: number,
       });
@@ -33,6 +34,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
           [question.id]: selectedChoice,
         };
 
+        setSelectedChoice(null);
         onSubmit(data);
         // reset form
       }}>
@@ -54,7 +56,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
                   name="nps"
                   value={number}
                   className="absolute h-full w-full cursor-pointer opacity-0"
-                  onChange={() => handleSelect(number)}
+                  onClick={() => handleSelect(number)}
                   required={question.required}
                 />
                 {number}

packages/js/src/components/NPSQuestion.tsx

@@ -20,6 +20,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
   const handleSelect = (number: number) => {
     setSelectedChoice(number);
     if (question.required) {
+      setSelectedChoice(null);
       onSubmit({
         [question.id]: number,
       });
@@ -36,6 +37,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
           data[question.id] = selectedChoice;
         }
 
+        setSelectedChoice(null);
         onSubmit(data);
         // reset form
       }}>
@@ -57,7 +59,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
                   name="nps"
                   value={number}
                   className="fb-absolute fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
-                  onChange={() => handleSelect(number)}
+                  onClick={() => handleSelect(number)}
                   required={question.required}
                 />
                 {number}

packages/ui/components/ColorPicker.tsx

@@ -12,7 +12,7 @@ export const ColorPicker = ({ color, onChange }: { color: string; onChange: (v:
         <div>
           #
           <HexColorInput
-            className="ml-2 mr-2 h-10 w-16 bg-transparent text-slate-500 outline-none focus:border-none"
+            className="ml-2 mr-2 h-10 w-32 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
             color={color}
             onChange={onChange}
           />