From c9ee7a7d37e13b11950603745f59224d3a42572b Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Thu, 20 Aug 2026 14:19:01 +0330
Subject: [PATCH] feat: enable multi-select support for dropdown components and
 update related tests

---
 .../Componentes/question-answer-storage.tsx   |  2 +-
 .../Componentes/question-answer.test.tsx      | 72 +++++++++++++++++++
 src/components/Componentes/ui-config.test.tsx | 13 ++--
 3 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/src/components/Componentes/question-answer-storage.tsx b/src/components/Componentes/question-answer-storage.tsx
index 739633a..2e5d778 100644
--- a/src/components/Componentes/question-answer-storage.tsx
+++ b/src/components/Componentes/question-answer-storage.tsx
@@ -132,7 +132,7 @@ function createQuestionField(
   let option_id: string | string[] | undefined;
 
   if (question.options && Array.isArray(question.options)) {
-    if (question.type === "checkbox" && Array.isArray(value)) {
+    if (Array.isArray(value)) {
       option_id = value;
     } else {
       const selectedOpt = question.options.find((opt) => opt.id === value);
diff --git a/src/components/Componentes/question-answer.test.tsx b/src/components/Componentes/question-answer.test.tsx
index 0f99de7..d5ac6c3 100644
--- a/src/components/Componentes/question-answer.test.tsx
+++ b/src/components/Componentes/question-answer.test.tsx
@@ -90,6 +90,33 @@ function TestComponent({ slug }: { slug: string }) {
         Set Checkbox
       </button>
 
+      <button
+        data-testid="set-multi-dropdown"
+        onClick={() =>
+          setAnswerValue(
+            {
+              id: "q_multi_drop",
+              type: "dropdown",
+              title: "Q Multi Drop",
+              order: 3,
+              required: true,
+              baseRequired: true,
+              isVisible: true,
+              description: "",
+              tooltip: "",
+              extras: { placeHolder: "", options: [], range: [1, 10] },
+              options: [
+                { id: "opt_d1", value: "D1", label: "Option D1", order: 1 },
+                { id: "opt_d2", value: "D2", label: "Option D2", order: 2 },
+              ],
+            },
+            ["opt_d1", "opt_d2"],
+          )
+        }
+      >
+        Set Multi Dropdown
+      </button>
+
       <button data-testid="save" onClick={() => flushAnswers()}>
         Save
       </button>
@@ -214,6 +241,51 @@ describe("Question Answer & Schema Integration", () => {
     });
   });
 
+  it("should send array of option_ids for multi-select dropdown", async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <QuestionAnswersProvider
+          slug="test_slug"
+          questions={[
+            {
+              id: "q_multi_drop",
+              type: "dropdown",
+              title: "Q Multi Drop",
+              order: 3,
+              required: true,
+              baseRequired: true,
+              isVisible: true,
+              description: "",
+              tooltip: "",
+              extras: { placeHolder: "", options: [], range: [1, 10] },
+              options: [
+                { id: "opt_d1", value: "D1", label: "Option D1", order: 1 },
+                { id: "opt_d2", value: "D2", label: "Option D2", order: 2 },
+              ],
+            },
+          ]}
+        >
+          <TestComponent slug="test_slug" />
+        </QuestionAnswersProvider>
+      </QueryClientProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId("set-multi-dropdown"));
+    fireEvent.click(screen.getByTestId("save"));
+
+    await waitFor(() => {
+      expect(capturedPayload).not.toBeNull();
+      const field = capturedPayload.fields.find(
+        (f: any) => f.key === "q_multi_drop",
+      );
+      expect(field.option_id).toEqual(["opt_d1", "opt_d2"]);
+    });
+  });
+
   it("batches all dirty answers into one mutation", async () => {
     const queryClient = new QueryClient({
       defaultOptions: { queries: { retry: false } },
diff --git a/src/components/Componentes/ui-config.test.tsx b/src/components/Componentes/ui-config.test.tsx
index ce6ffe7..8a5d371 100644
--- a/src/components/Componentes/ui-config.test.tsx
+++ b/src/components/Componentes/ui-config.test.tsx
@@ -93,9 +93,8 @@ describe("UI Config based behavior", () => {
       ui_config: { enable_geoip: true },
     } as any;
 
-    const { getStoredUserGeoRegion, setStoredUserGeoRegion } = await import(
-      "@/lib/geo-region"
-    );
+    const { setStoredUserGeoRegion } = await import("@/lib/geo-region");
+    const { marriageQueryKeys } = await import("@/hooks/marriage/query-keys");
     setStoredUserGeoRegion({
       city: "Tehran",
       country: "Iran",
@@ -103,10 +102,16 @@ describe("UI Config based behavior", () => {
       phoneCode: "+98",
     });
 
+    queryClient.setQueryData(marriageQueryKeys.sectionData("test-geoip"), {
+      status: "success",
+      data: [],
+      version: 1,
+    });
+
     render(
       <QueryClientProvider client={queryClient}>
         <QuestionAnswersProvider
-          slug="test"
+          slug="test-geoip"
           questions={[qWithGeo]}
           initialAnswers={{}}
           initialFields={[]}