The disabled/readonly state of a Text question is not reset when surv… (

#9008)

* The disabled/readonly state of a Text question is not reset when survey.showInvisibleElements is enabled fix #9002

* Fix compilation error

* Fix functional test

packages/survey-core/src/base-interfaces.ts

@@ -311,6 +311,7 @@ export interface IElement extends IConditionRunner, ISurveyElement {
   dispose(): void;
   needResponsiveWidth(): boolean;
   updateRootStyle(): void;
+  updateElementVisibility(): void;
 }
 
 export interface IQuestion extends IElement, ISurveyErrorOwner {

packages/survey-core/src/panel.ts

@@ -1017,14 +1017,11 @@ export class PanelModelBase extends SurveyElement<Question>
     }
     return false;
   }
-  updateElementVisibility() {
-    for (var i = 0; i < this.elements.length; i++) {
-      var el = this.elements[i];
-      (<Base>(<any>el)).setPropertyValue("isVisible", el.isVisible);
-      if (el.isPanel) {
-        (<PanelModelBase>(<any>el)).updateElementVisibility();
-      }
+  updateElementVisibility(): void {
+    for (let i = 0; i < this.elements.length; i++) {
+      this.elements[i].updateElementVisibility();
     }
+    super.updateElementVisibility();
   }
   getFirstQuestionToFocus(withError: boolean = false, ignoreCollapseState: boolean = false): Question {
     if (!withError && !ignoreCollapseState && this.isCollapsed) return null;
@@ -1046,8 +1043,8 @@ export class PanelModelBase extends SurveyElement<Question>
    * Focuses the first question in this panel/page.
    * @see focusFirstErrorQuestion
    */
-  public focusFirstQuestion() {
-    var q = this.getFirstQuestionToFocus();
+  public focusFirstQuestion(): void {
+    const q = this.getFirstQuestionToFocus();
     if (!!q) {
       q.focus();
     }

packages/survey-core/src/question.ts

@@ -164,9 +164,7 @@ export class Question extends SurveyElement<Question>
     });
     this.commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
 
-    this.addExpressionProperty("visibleIf",
-      (obj: Base, res: any) => { this.visible = res === true; },
-      (obj: Base) => { return !this.areInvisibleElementsShowing; });
+    this.addExpressionProperty("visibleIf", (obj: Base, res: any) => { this.visible = res === true; });
     this.addExpressionProperty("enableIf", (obj: Base, res: any) => { this.readOnly = res === false; });
     this.addExpressionProperty("requiredIf", (obj: Base, res: any) => { this.isRequired = res === true; });
 
@@ -417,6 +415,9 @@ export class Question extends SurveyElement<Question>
       this.onHidingContent();
     }
   }
+  public updateElementVisibility(): void {
+    this.updateIsVisibleProp();
+  }
   private updateIsVisibleProp(): void {
     const prev = this.getPropertyValue("isVisible");
     const val = this.isVisible;
@@ -426,6 +427,9 @@ export class Question extends SurveyElement<Question>
         this.onHidingContent();
       }
     }
+    if(val !== this.visible && this.areInvisibleElementsShowing) {
+      this.updateQuestionCss(true);
+    }
   }
   /**
    * Specifies whether to use display names for question values in placeholders.

packages/survey-core/src/question_matrixdropdownbase.ts

@@ -93,7 +93,7 @@ export class MatrixDropdownCell {
       return this.column.colOwner.getCellAriaLabel(rowTitle, this.questionValue.title);
     };
   }
-  public locStrsChanged() {
+  public locStrsChanged(): void {
     this.question.locStrsChanged();
   }
   protected createQuestion(
@@ -128,7 +128,7 @@ export class MatrixDropdownCell {
   public getQuestionWrapperClassName(className: string): string {
     return className;
   }
-  public runCondition(values: HashTable<any>, properties: HashTable<any>) {
+  public runCondition(values: HashTable<any>, properties: HashTable<any>): void {
     this.question.runCondition(values, properties);
   }
 }
@@ -444,6 +444,12 @@ export class MatrixDropdownRowModelBase implements ISurveyData, ISurveyImpl, ILo
       this.onQuestionReadOnlyChanged();
     }
   }
+  public updateElementVisibility(): void {
+    this.cells.forEach(cell => cell.question.updateElementVisibility());
+    if (!!this.detailPanel) {
+      this.detailPanel.updateElementVisibility();
+    }
+  }
   protected setRowsVisibleIfValues(values: any): void {}
   public getNamesWithDefaultValues(): Array<string> {
     const res: Array<string> = [];
@@ -1489,6 +1495,13 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     super.runTriggers(name, value);
     this.runFuncForCellQuestions((q: Question) => { q.runTriggers(name, value); });
   }
+  public updateElementVisibility(): void {
+    super.updateElementVisibility();
+    const rows = this.generatedVisibleRows;
+    if (!!rows) {
+      rows.forEach(row => row.updateElementVisibility());
+    }
+  }
   protected shouldRunColumnExpression(): boolean {
     return false;
   }

packages/survey-core/src/survey-element.ts

@@ -339,6 +339,9 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
     this.onParentQuestionChanged();
   }
   protected onParentQuestionChanged(): void { }
+  public updateElementVisibility(): void {
+    this.setPropertyValue("isVisible", this.isVisible);
+  }
 
   public get skeletonComponentName(): string {
     return this.getSkeletonComponentNameCore();

packages/survey-core/tests/surveytests.ts

@@ -8979,6 +8979,72 @@ QUnit.test("survey.showInvisibleElements property, Bug#2423", function (assert)
   );
 });
 
+QUnit.test("survey.showInvisibleElements property & question invisible css style, Bug#9002", function (assert) {
+  const survey = new SurveyModel();
+  survey.css = { question: { invisible: "sd-element--invisible" } };
+  assert.equal(survey.css.question.invisible, "sd-element--invisible", "survey css is updated");
+  survey.fromJSON({
+    "elements": [
+      {
+        "type": "text",
+        "name": "q2",
+        "visibleIf": "{q1} = true"
+      },
+      {
+        "type": "boolean",
+        "name": "q1",
+        "title": "Show Textbox"
+      }
+    ]
+  });
+  survey.showInvisibleElements = true;
+  const q1 = survey.getQuestionByName("q1");
+  const q2 = survey.getQuestionByName("q2");
+  assert.equal(q2.visible, false, "visible is false, #1");
+  assert.equal(q2.isVisible, true, "isVisible is true, #1");
+  assert.equal(q2.getRootCss().indexOf("sd-element--invisible") > -1, true, "#1");
+  q1.value = true;
+  assert.equal(q2.visible, true, "visible is false, #2");
+  assert.equal(q2.isVisible, true, "isVisible is true, #2");
+  assert.equal(q2.getRootCss().indexOf("sd-element--invisible") > -1, false, "#2");
+  q1.value = false;
+  assert.equal(q2.visible, false, "visible is false, #3");
+  assert.equal(q2.isVisible, true, "isVisible is true, #3");
+  assert.equal(q2.getRootCss().indexOf("sd-element--invisible") > -1, true, "#3");
+  survey.showInvisibleElements = false;
+  assert.equal(q2.visible, false, "visible is false, #4");
+  assert.equal(q2.isVisible, false, "isVisible is true, #4");
+  assert.equal(q2.getRootCss().indexOf("sd-element--invisible") > -1, false, "#4");
+});
+QUnit.test("survey.showInvisibleElements property & multiple pages", function (assert) {
+  const survey = new SurveyModel({
+    pages: [
+      {
+        elements: [
+          { type: "radiogroup", name: "q1", choices: ["Yes", "No"] },
+          {
+            type: "text",
+            name: "q2",
+            defaultValue: "q2Value",
+            visibleIf: "{q1} = 'Yes'",
+          },
+        ],
+      },
+      {
+        elements: [{ type: "text", name: "q3", visibleIf: "{q1} = 'Yes'" }],
+      },
+    ],
+  });
+  assert.equal(survey.navigationBar.getActionById("sv-nav-complete").isVisible, true, "sv-nav-complete, #1");
+  assert.equal(survey.navigationBar.getActionById("sv-nav-next").isVisible, false, "sv-nav-next, #1");
+  survey.showInvisibleElements = true;
+  assert.equal(survey.navigationBar.getActionById("sv-nav-complete").isVisible, false, "sv-nav-complete, #2");
+  assert.equal(survey.navigationBar.getActionById("sv-nav-next").isVisible, true, "sv-nav-next, #2");
+  survey.showInvisibleElements = false;
+  assert.equal(survey.navigationBar.getActionById("sv-nav-complete").isVisible, true, "sv-nav-complete, #3");
+  assert.equal(survey.navigationBar.getActionById("sv-nav-next").isVisible, false, "sv-nav-next, #3");
+});
+
 QUnit.test(
   "panel.visibleIf doesn't work if it is a single panel on the page, #1329",
   function (assert) {