Composite component onValueChanged callback doesn't change the survey…

….data immediately fix #8067 (#8068)
surveyjs · Apr 8, 2024 · 1d99d22 · 1d99d22
1 parent 3555b78
commit 1d99d22
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 5 deletions.
diff --git a/src/question_custom.ts b/src/question_custom.ts
@@ -641,6 +641,9 @@ export abstract class QuestionCustomModelBase extends Question
   }
   setValue(name: string, newValue: any, locNotification: any, allowNotifyValueChanged?: boolean): any {
     if (!this.data) return;
+    if (!!this.customQuestion) {
+      this.customQuestion.onValueChanged(this, name, newValue);
+    }
     var newName = this.convertDataName(name);
     let valueForSurvey = this.convertDataValue(name, newValue);
     if(this.valueToDataCallback) {
@@ -654,9 +657,6 @@ export abstract class QuestionCustomModelBase extends Question
     );
     this.updateIsAnswered();
     this.updateElementCss();
-    if (!!this.customQuestion) {
-      this.customQuestion.onValueChanged(this, name, newValue);
-    }
   }
   protected getQuestionByName(name: string): IQuestion {
     return undefined;
@@ -1214,7 +1214,8 @@ export class QuestionCompositeModel extends QuestionCustomModelBase {
     this.contentPanel.questions.forEach(q => q.collectNestedQuestions(questions, visibleOnly));
   }
   protected convertDataValue(name: string, newValue: any): any {
-    var val = this.getValueForContentPanel(this.value);
+    var val = !!this.contentPanel && !this.isEditingSurveyElement ?
+      this.contentPanel.getValue() : this.getValueForContentPanel(this.value);
     if (!val) val = {};
     if (this.isValueEmpty(newValue) && !this.isEditingSurveyElement) {
       delete val[name];

diff --git a/tests/question_customtests.ts b/tests/question_customtests.ts
@@ -3137,4 +3137,74 @@ QUnit.test("Composite: update questions on a value change", function (assert) {
   assert.equal(internalQ2.choices.length, 1, "choices.length #2");
   assert.equal(internalQ2.choices[0].value, 3, "choices[0].value #2");
   ComponentCollection.Instance.clear();
-});
+});
+QUnit.test("Composite: onValueChanging and survey.onValueChanging", function (assert) {
+  ComponentCollection.Instance.add({
+    name: "test",
+    elementsJSON: [
+      { type: "text", name: "q1" },
+      { type: "dropdown", name: "q2", choices: [1, 2, 3] },
+      { type: "text", name: "q3", choices: [1, 2, 3] }
+    ],
+    onValueChanging(question, name, newValue) {
+      if (name === "q1") {
+        question.contentPanel.getQuestionByName("q2").clearValue();
+      }
+      if (name === "q2") {
+        question.contentPanel.getQuestionByName("q3").value = newValue;
+      }
+      return newValue;
+    },
+  });
+  const survey = new SurveyModel({
+    elements: [
+      { type: "test", name: "q1" }
+    ]
+  });
+  let onValueChangingData: any = undefined;
+  survey.onValueChanging.add((sender, options) => {
+    onValueChangingData = options.value;
+  });
+  const q1 = <QuestionCompositeModel>survey.getQuestionByName("q1");
+  q1.contentPanel.getQuestionByName("q1").value = "test1";
+  assert.deepEqual(onValueChangingData, { q1: "test1" }, "test #1");
+  q1.contentPanel.getQuestionByName("q2").value = 2;
+  assert.deepEqual(onValueChangingData, { q1: "test1", q2: 2, q3: 2 }, "test #2");
+  q1.contentPanel.getQuestionByName("q1").value = "test2";
+  assert.deepEqual(onValueChangingData, { q1: "test2" }, "test #3");
+
+  ComponentCollection.Instance.clear();
+});
+QUnit.test("Composite: onValueChanged and survey.data", function (assert) {
+  ComponentCollection.Instance.add({
+    name: "test",
+    elementsJSON: [
+      { type: "text", name: "q1" },
+      { type: "dropdown", name: "q2", choices: [1, 2, 3] },
+      { type: "text", name: "q3", choices: [1, 2, 3] }
+    ],
+    onValueChanged(question, name, newValue) {
+      if (name === "q1") {
+        question.contentPanel.getQuestionByName("q2").clearValue();
+        question.contentPanel.getQuestionByName("q3").clearValue();
+      }
+      if (name === "q2") {
+        question.contentPanel.getQuestionByName("q3").value = newValue;
+      }
+    },
+  });
+  const survey = new SurveyModel({
+    elements: [
+      { type: "test", name: "q1" }
+    ]
+  });
+  const q1 = <QuestionCompositeModel>survey.getQuestionByName("q1");
+  q1.contentPanel.getQuestionByName("q1").value = "test1";
+  assert.deepEqual(survey.data, { q1: { q1: "test1" } }, "test #1");
+  q1.contentPanel.getQuestionByName("q2").value = 2;
+  assert.deepEqual(survey.data, { q1: { q1: "test1", q2: 2, q3: 2 } }, "test #2");
+  q1.contentPanel.getQuestionByName("q1").value = "test2";
+  assert.deepEqual(survey.data, { q1: { q1: "test2" } }, "test #3");
+
+  ComponentCollection.Instance.clear();
+});