Fix: Detail panel is not read-only when matrix is read-only #3357 (#3358

)

src/question_matrixdropdownbase.ts

@@ -1226,6 +1226,9 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner {
     for (var i = 0; i < questions.length; i++) {
       questions[i].readOnly = parentIsReadOnly;
     }
+    if(!!this.detailPanel) {
+      this.detailPanel.readOnly = parentIsReadOnly;
+    }
   }
   public hasErrors(
     fireCallback: boolean,
@@ -3447,6 +3450,7 @@ export class QuestionMatrixDropdownModelBase
   createRowDetailPanel(row: MatrixDropdownRowModelBase): PanelModel {
     if (this.isDesignMode) return this.detailPanel;
     var panel = this.createNewDetailPanel();
+    panel.readOnly = this.isReadOnly;
     var json = this.detailPanel.toJSON();
     new JsonObject().toObject(json, panel);
     panel.renderWidth = "100%";

tests/question_matrixdynamictests.ts

@@ -5431,6 +5431,31 @@ QUnit.test("Detail panel in matrix dropdown, get/set values", function(assert) {
     "The value set from the survey correctly into closed detail panel question"
   );
 });
+QUnit.test("Detail panel and matrix read-only", function(assert) {
+  var survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdropdown",
+        name: "matrix",
+        detailPanelMode: "underRow",
+        detailElements: [{ type: "text", name: "q1" }],
+        rows: ["row1", "row2"],
+        columns: [
+          { cellType: "text", name: "col1" },
+          { cellType: "text", name: "col2" },
+        ],
+      },
+    ],
+  });
+  var matrix = <QuestionMatrixDropdownModel>survey.getQuestionByName("matrix");
+  matrix.readOnly = true;
+  matrix.visibleRows[0].showDetailPanel();
+  assert.equal(matrix.visibleRows[0].detailPanel.readOnly, true, "Panel is read-only");
+  matrix.readOnly = false;
+  assert.equal(matrix.visibleRows[0].detailPanel.readOnly, false, "Panel is not read-only");
+  matrix.readOnly = true;
+  assert.equal(matrix.visibleRows[0].detailPanel.readOnly, true, "Panel is read-only again");
+});
 QUnit.test(
   "Detail panel column and detail Panel have the same names, get/set values",
   function(assert) {