Bind a detail panel's matrix to a row's TagBox using the valueName an…

…d valuePropertyName settings fix #8697 (#8698)

packages/survey-core/src/panel.ts

@@ -699,11 +699,16 @@ export class PanelModelBase extends SurveyElement<Question>
     return null;
   }
   public getQuestionByValueName(valueName: string): Question {
+    const res = this.getQuestionsByValueName(valueName);
+    return res.length > 0 ? res[0] : null;
+  }
+  public getQuestionsByValueName(valueName: string): Array<Question> {
+    const res = [];
     var questions = this.questions;
     for (var i = 0; i < questions.length; i++) {
-      if (questions[i].getValueName() == valueName) return questions[i];
+      if (questions[i].getValueName() == valueName) res.push(questions[i]);
     }
-    return null;
+    return res;
   }
   /**
    * Returns a JSON object with question values nested in the panel/page.

packages/survey-core/src/question_matrixdropdownbase.ts

@@ -483,6 +483,9 @@ export class MatrixDropdownRowModelBase implements ISurveyData, ISurveyImpl, ILo
   private setValueCore(name: string, newColumnValue: any, isComment: boolean) {
     if (this.isSettingValue) return;
     this.updateQuestionsValue(name, newColumnValue, isComment);
+    if(!isComment) {
+      this.updateSharedQuestionsValue(name, newColumnValue);
+    }
     var newValue = this.value;
     var changedName = isComment ? name + Base.commentSuffix : name;
     var changedValue = newColumnValue;
@@ -533,6 +536,18 @@ export class MatrixDropdownRowModelBase implements ISurveyData, ISurveyImpl, ILo
     }
     this.isSettingValue = false;
   }
+  private updateSharedQuestionsValue(name: string, value: any): void {
+    const questions = this.getQuestionsByValueName(name);
+    if(questions.length > 1) {
+      for(let i = 0; i < questions.length; i ++) {
+        if(!Helpers.isTwoValueEquals(questions[i].value, value)) {
+          this.isSettingValue = true;
+          questions[i].updateValueFromSurvey(value);
+          this.isSettingValue = false;
+        }
+      }
+    }
+  }
   public runTriggers(name: string, value: any): void {
     if (!name) return;
     this.questions.forEach(q => q.runTriggers(name, value));
@@ -604,12 +619,25 @@ export class MatrixDropdownRowModelBase implements ISurveyData, ISurveyImpl, ILo
     }
     return res;
   }
+  public getQuestionsByValueName(name: string): Array<Question> {
+    let res = [];
+    for (var i = 0; i < this.cells.length; i++) {
+      const cell = this.cells[i];
+      if(cell.question && cell.question.getValueName() === name) {
+        res.push(cell.question);
+      }
+    }
+    if (!!this.detailPanel) {
+      res = res.concat(this.detailPanel.getQuestionsByValueName(name));
+    }
+    return res;
+  }
   protected getSharedQuestionByName(columnName: string): Question {
     return !!this.data
       ? this.data.getSharedQuestionByName(columnName, this)
       : null;
   }
-  public clearIncorrectValues(val: any) {
+  public clearIncorrectValues(val: any): void {
     for (var key in val) {
       var question = this.getQuestionByName(key);
       if (question) {

packages/survey-core/tests/question_matrixdynamictests.ts

@@ -9465,6 +9465,144 @@ QUnit.test("matrix dynamic expression & checkbox valuePropertyName & sumInArray
   assert.equal(expression.value, 12, "Calculate values correctly");
 });
 
+QUnit.test("matrix dynamic & share data in cells & detail panel, Bug8697", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdynamic",
+        name: "q1",
+        columns: [
+          {
+            name: "col1",
+            cellType: "text"
+          }
+        ],
+        detailPanelMode: "underRow",
+        detailElements: [
+          {
+            name: "q2",
+            type: "text",
+            valueName: "col1"
+          }
+        ]
+      }
+    ]
+  });
+  const matrix = <QuestionMatrixDynamicModel>survey.getQuestionByName("q1");
+  const rows = matrix.visibleRows;
+  rows[0].showDetailPanel();
+  const col1 = rows[0].getQuestionByName("col1");
+  const q2Cell = rows[0].getQuestionByName("q2");
+  col1.value = "abc";
+  assert.equal(q2Cell.value, "abc", "#1");
+  q2Cell.value = "edf";
+  assert.equal(col1.value, "edf", "#2");
+  rows[1].getQuestionByName("col1").value = "123";
+  rows[1].showDetailPanel();
+  assert.equal(rows[1].getQuestionByName("q2").value, "123", "#3");
+});
+QUnit.test("matrix dynamic detail panel & shared matrix dynamics, Bug8697", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdynamic",
+        name: "q1",
+        columns: [
+          {
+            name: "col1",
+            cellType: "text"
+          }
+        ],
+        detailPanelMode: "underRow",
+        detailElements: [
+          {
+            name: "matrix1",
+            type: "matrixdynamic",
+            valueName: "data",
+            columns: [{ cellType: "text", name: "col1" }]
+          },
+          {
+            name: "matrix2",
+            type: "matrixdynamic",
+            valueName: "data",
+            columns: [{ cellType: "text", name: "col1" }],
+            rowCount: 0
+          }
+        ]
+      }
+    ]
+  });
+  const matrix = <QuestionMatrixDynamicModel>survey.getQuestionByName("q1");
+  const rows = matrix.visibleRows;
+  rows[0].showDetailPanel();
+  const matrix1 = <QuestionMatrixDynamicModel>rows[0].getQuestionByName("matrix1");
+  const matrix2 = <QuestionMatrixDynamicModel>rows[0].getQuestionByName("matrix2");
+  matrix1.visibleRows[0].getQuestionByName("col1").value = "a1";
+  matrix1.visibleRows[1].getQuestionByName("col1").value = "a2";
+  assert.deepEqual(matrix2.value, [{ col1: "a1" }, { col1: "a2" }], "#1");
+});
+QUnit.test("matrix dynamic detail panel & checkbox valuePropertyName, Bug8697", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdynamic",
+        name: "q1",
+        columns: [
+          {
+            name: "col1",
+            cellType: "checkbox",
+            choices: [1, 2, 3, 4, 5],
+            valuePropertyName: "prop1"
+          }
+        ]
+      }
+    ]
+  });
+  const matrix = <QuestionMatrixDynamicModel>survey.getQuestionByName("q1");
+  const rows = matrix.visibleRows;
+  const checkbox = rows[0].getQuestionByName("col1");
+  checkbox.renderedValue = [1, 4];
+  assert.deepEqual(checkbox.renderedValue, [1, 4], "renderedValue #1");
+  assert.deepEqual(checkbox.value, [{ prop1: 1 }, { prop1: 4 }], "value #1");
+});
+QUnit.test("matrix dynamic detail panel & checkbox valuePropertyName & matrix dynamic in detail panel, Bug8697", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdynamic",
+        name: "q1",
+        columns: [
+          {
+            name: "col1",
+            cellType: "checkbox",
+            choices: [1, 2, 3, 4, 5],
+            valuePropertyName: "prop1"
+          }
+        ],
+        detailPanelMode: "underRow",
+        detailElements: [
+          {
+            name: "matrix1",
+            type: "matrixdynamic",
+            valueName: "col1",
+            columns: [{ cellType: "text", name: "prop1" }],
+            rowCount: 0
+          }
+        ]
+      }
+    ]
+  });
+  const matrix = <QuestionMatrixDynamicModel>survey.getQuestionByName("q1");
+  const rows = matrix.visibleRows;
+  rows[0].showDetailPanel();
+  rows[0].getQuestionByName("col1").renderedValue = [1, 3, 4, 5];
+  let matrix1 = <QuestionMatrixDynamicModel>rows[0].getQuestionByName("matrix1");
+  assert.deepEqual(matrix1.value, [{ prop1: 1 }, { prop1: 3 }, { prop1: 4 }, { prop1: 5 }], "#1");
+  rows[1].getQuestionByName("col1").renderedValue = [3];
+  rows[1].showDetailPanel();
+  matrix1 = <QuestionMatrixDynamicModel>rows[1].getQuestionByName("matrix1");
+  assert.deepEqual(matrix1.value, [{ prop1: 3 }], "#2");
+});
 QUnit.test("Totals alingment", function (assert) {
   var json = {
     pages: [