From 018563ba037cc925b0312ace0bb48ac8ef4c9c61 Mon Sep 17 00:00:00 2001
From: Dhruwang <dhruwangjariwala18@gmail.com>
Date: Thu, 8 Jan 2026 17:12:59 +0530
Subject: [PATCH] fix: integrate single select element with centralized
 validation

- Remove local validation logic from MultipleChoiceSingleElement
- Accept errorMessage prop from centralized validation
- Pass errorMessage to SingleSelect component
- Remove unused useTranslation import
---
 .../multiple-choice-single-element.tsx        | 23 +++----------------
 .../general/element-conditional.tsx           |  1 +
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
index 4c7c89a1d3..f399fef7b6 100644
--- a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
-import { useTranslation } from "react-i18next";
 import { SingleSelect, type SingleSelectOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyMultipleChoiceElement } from "@formbricks/types/surveys/elements";
@@ -17,6 +16,7 @@ interface MultipleChoiceSingleElementProps {
   autoFocusEnabled: boolean;
   currentElementId: string;
   dir?: "ltr" | "rtl" | "auto";
+  errorMessage?: string; // Validation error from centralized validation
 }
 
 export function MultipleChoiceSingleElement({
@@ -28,14 +28,13 @@ export function MultipleChoiceSingleElement({
   setTtc,
   currentElementId,
   dir = "auto",
+  errorMessage,
 }: Readonly<MultipleChoiceSingleElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
   const [otherValue, setOtherValue] = useState("");
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const isCurrent = element.id === currentElementId;
   const isRequired = element.validationRules?.some((rule) => rule.type === "required") ?? false;
   useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
-  const { t } = useTranslation();
 
   const shuffledChoicesIds = useMemo(() => {
     if (element.shuffleOption) {
@@ -91,7 +90,6 @@ export function MultipleChoiceSingleElement({
   }, [isOtherSelected, value]);
 
   const handleChange = (selectedValue: string) => {
-    setErrorMessage(undefined);
     if (selectedValue === otherOption?.id) {
       setOtherValue("");
       onChange({ [element.id]: "" });
@@ -153,24 +151,9 @@ export function MultipleChoiceSingleElement({
     return undefined;
   }, [value, otherOption, allOptions, isOtherSelected]);
 
-  const validateRequired = (): boolean => {
-    // Check if nothing is selected
-    if (isRequired && selectedValue === undefined) {
-      setErrorMessage(t("errors.please_select_an_option"));
-      return false;
-    }
-    // Check if "other" is selected but not filled
-    if (isRequired && isOtherSelected && !otherValue.trim()) {
-      setErrorMessage(t("errors.please_fill_out_this_field"));
-      return false;
-    }
-    return true;
-  };
-
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    setErrorMessage(undefined);
-    if (!validateRequired()) return;
+    // Update TTC when form is submitted (for TTC collection)
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
diff --git a/packages/surveys/src/components/general/element-conditional.tsx b/packages/surveys/src/components/general/element-conditional.tsx
index b00f1d18fb..1368942951 100644
--- a/packages/surveys/src/components/general/element-conditional.tsx
+++ b/packages/surveys/src/components/general/element-conditional.tsx
@@ -142,6 +142,7 @@ export function ElementConditional({
             autoFocusEnabled={autoFocusEnabled}
             currentElementId={currentElementId}
             dir={dir}
+            errorMessage={errorMessage}
           />
         );
       case TSurveyElementTypeEnum.MultipleChoiceMulti: