Column visibilty doesn't work correctly if expression checks element properties fix #11127 (#11131)

Author: andrewtelnov

packages/survey-core/src/question_matrixdropdownbase.ts

@@ -66,6 +66,12 @@ export class MatrixDropdownCell {
     this.questionValue = this.createQuestion(column, row, data);
     this.questionValue.updateCustomWidget();
     this.updateCellQuestionTitleDueToAccessebility(row);
+    this.questionValue.registerPropertyChangedHandlers(
+      ["isVisible"], () => {
+        this.onQuestionVisibilityChanged();
+      },
+      "cell"
+    );
   }
   private updateCellQuestionTitleDueToAccessebility(row: MatrixDropdownRowModelBase): void {
     this.questionValue.locTitle.onGetTextCallback = (str: string): string => {
@@ -115,6 +121,13 @@ export class MatrixDropdownCell {
   public runCondition(properties: HashTable<any>): void {
     this.question.runCondition(properties);
   }
+  private onQuestionVisibilityChanged(): void {
+    this.column.onCellVisibilityChanged(this.question.isVisible);
+  }
+  public dispose(): void {
+    this.questionValue.unregisterPropertyChangedHandlers(["isVisible"], "cell");
+    this.questionValue.dispose();
+  }
 }
 
 export class MatrixDropdownTotalCell extends MatrixDropdownCell {
@@ -827,6 +840,9 @@ export class MatrixDropdownRowModelBase extends DynamicItemModelBase implements
   private onEditingObjPropertyChanged: (sender: Base, options: any) => void;
   private editingObjValue: Base;
   public dispose(): void {
+    for (let i = 0; i < this.cells.length; i++) {
+      this.cells[i].dispose();
+    }
     if (!!this.editingObj) {
       this.editingObj.onPropertyChanged.remove(
         this.onEditingObjPropertyChanged
@@ -1399,6 +1415,12 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
   onColumnVisibilityChanged(column: MatrixDropdownColumn): void {
     this.resetTableAndRows();
   }
+  onColumnCellVisibilityChanged(column: MatrixDropdownColumn): void {
+    if (this.isDesignMode || this.isRunningCellsCondition) return;
+    if (this.isColumnVisibilityChanged(column, true)) {
+      this.resetRenderedTable(true);
+    }
+  }
   onColumnCellTypeChanged(column: MatrixDropdownColumn): void {
     this.updateDefaultRowValue(column);
     this.resetTableAndRows();
@@ -1547,9 +1569,11 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
   protected shouldRunColumnExpression(): boolean {
     return false;
   }
+  private isRunningCellsCondition: boolean;
   protected runCellsCondition(properties: HashTable<any>): boolean {
     if (this.isDesignMode) return false;
     let isRowVisiblilityChanged = false;
+    this.isRunningCellsCondition = true;
     const isAlwaysVisible = this.areInvisibleElementsShowing;
     const rowsVisibleIf = this.getExpressionFromSurvey("rowsVisibleIf");
     const rows = this.generatedVisibleRows;
@@ -1564,6 +1588,7 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     }
     this.checkColumnsVisibility();
     this.checkColumnsRenderedRequired();
+    this.isRunningCellsCondition = false;
     return isRowVisiblilityChanged;
   }
   protected runConditionsForColumns(properties: HashTable<any>): boolean {

packages/survey-core/src/question_matrixdropdowncolumn.ts

@@ -26,6 +26,7 @@ export interface IMatrixColumnOwner extends ILocalizableOwner {
   ): void;
   onShowInMultipleColumnsChanged(column: MatrixDropdownColumn): void;
   onColumnVisibilityChanged(column: MatrixDropdownColumn): void;
+  onColumnCellVisibilityChanged(column: MatrixDropdownColumn): void;
   getCellType(): string;
   getCustomCellType(column: MatrixDropdownColumn, row: MatrixDropdownRowModelBase, cellType: string): string;
   onColumnCellTypeChanged(column: MatrixDropdownColumn): void;
@@ -298,6 +299,10 @@ export class MatrixDropdownColumn extends Base
   public set hasVisibleCell(newVal: boolean) {
     this._hasVisibleCell = newVal;
   }
+  public onCellVisibilityChanged(isVisible: boolean): void {
+    if (!this.colOwner || this.hasVisibleCell === isVisible) return;
+    this.colOwner.onColumnCellVisibilityChanged(this);
+  }
   public isColumnsVisibleIf: boolean = true;
   public getVisibleMultipleChoices(): Array<ItemValue> {
     const choices = this.templateQuestion.visibleChoices;

packages/survey-core/tests/question_matrixdynamictests.ts

@@ -4438,6 +4438,49 @@ QUnit.test(
     assert.equal(rows.length, 3, "Only one column is shown + remove button + errrors row");
   }
 );
+QUnit.test("Matrixdynamic column.visibleIf, toggle column visibility on and off via external value, Bug#11127", (assert) => {
+  const survey = new SurveyModel({
+    "checkErrorsMode": "onValueChanged",
+    "elements": [{
+      "name": "q1",
+      "type": "text",
+      "inputType": "number",
+      "min": 10
+    }, {
+      "type": "matrixdynamic",
+      "name": "matrix",
+      "columns": [
+        { "name": "col1", "cellType": "text", "visibleIf": "{q1} notempty && !{$q1.containsErrors}" },
+        { "name": "col2", "cellType": "text" }
+      ]
+    }]
+  });
+  const matrix = <QuestionMatrixDynamicModel>survey.getQuestionByName("matrix");
+  const rows = matrix.visibleRows;
+  const column = matrix.columns[0];
+  let table = matrix.renderedTable;
+  assert.equal(column.hasVisibleCell, false, "Initial: col1 is invisible");
+  assert.equal(column.isColumnVisible, false, "Initial: col1 is invisible");
+  assert.equal(table.headerRow.cells.length, 2, "Initial: header has col2 + remove button");
+
+  survey.setValue("q1", 20);
+  table = matrix.renderedTable;
+  assert.equal(column.hasVisibleCell, true, "q1=20: col1 is visible");
+  assert.equal(column.isColumnVisible, true, "q1=20: col1 is visible");
+  assert.equal(table.headerRow.cells.length, 3, "q1=20: header has col1 + col2 + remove button");
+
+  survey.setValue("q1", 5);
+  table = matrix.renderedTable;
+  assert.equal(column.hasVisibleCell, false, "q1=5: col1 is invisible");
+  assert.equal(column.isColumnVisible, false, "q1=5: col1 is invisible");
+  assert.equal(table.headerRow.cells.length, 2, "q1=5: header has col2 + remove button");
+
+  survey.setValue("q1", 20);
+  table = matrix.renderedTable;
+  assert.equal(column.hasVisibleCell, true, "q1=20 again: col1 is visible");
+  assert.equal(column.isColumnVisible, true, "q1=20 again: col1 is visible");
+  assert.equal(table.headerRow.cells.length, 3, "q1=20 again: header has col1 + col2 + remove button");
+});
 
 QUnit.test("Matrix validation in cells and async functions in expression", (assert) => {
   var returnResults = new Array<any>();