Merge pull request #9189 from surveyjs/features/delay-creating-csscla…

…ssesvalue Do not create cssClassesValue for elements on inactive pages
surveyjs · Dec 20, 2024 · 1699b77 · 1699b77
2 parents 2604383 + ef1a08d
commit 1699b77
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
@@ -1182,21 +1182,32 @@ export class Question extends SurveyElement<Question>
       .append(this.cssClasses.rootMobile, this.isMobile)
       .toString();
   }
+  private isRequireUpdateElements: boolean;
   public updateElementCss(reNew?: boolean): void {
-    super.updateElementCss(reNew);
-    if (reNew) {
-      this.updateQuestionCss(true);
+    if(this.wasRendered) {
+      super.updateElementCss(reNew);
+      if (reNew) {
+        this.updateQuestionCss(true);
+      }
+    } else {
+      this.isRequireUpdateElements = true;
     }
     this.resetIndents();
   }
+  protected onFirstRenderingCore(): void {
+    if(this.isRequireUpdateElements) {
+      this.isRequireUpdateElements = false;
+      this.updateElementCss(true);
+    }
+    super.onFirstRenderingCore();
+  }
   protected updateQuestionCss(reNew?: boolean): void {
-    if (
-      this.isLoadingFromJson ||
-      !this.survey ||
-      (reNew !== true && !this.cssClassesValue)
-    )
-      return;
-    this.updateElementCssCore(this.cssClasses);
+    if (this.isLoadingFromJson || !this.survey) return;
+    if(this.wasRendered) {
+      this.updateElementCssCore(this.cssClasses);
+    } else {
+      this.isRequireUpdateElements = true;
+    }
   }
   private ensureElementCss() {
     if (!this.cssClassesValue) {

diff --git a/packages/survey-core/tests/surveyquestiontests.ts b/packages/survey-core/tests/surveyquestiontests.ts
@@ -6156,6 +6156,37 @@ QUnit.test("Check isAnswered property", function (assert) {
 
   survey.css.question.titleOnAnswer = prevStyle;
 });
+QUnit.test("Do not update cssClassesValue while the element is not rendered", function (assert) {
+  const survey = new SurveyModel({
+    pages: [{
+      elements: [
+        { type: "text", name: "q1" },
+      ] }, {
+      elements: [
+        { type: "text", name: "q2" },
+        { type: "text", name: "q3", defaultValue: 2 },
+      ]
+    }]
+  });
+  const prevStyle = survey.css.question.titleOnAnswer;
+  survey.css.question.titleOnAnswer = "answer";
+
+  const q2 = survey.getQuestionByName("q2");
+  const q3 = survey.getQuestionByName("q3");
+  q2.value = 1;
+  assert.notOk(q2.getPropertyValue("cssClassesValue"), "#1");
+  assert.notOk(q3.getPropertyValue("cssClassesValue"), "#2");
+  assert.notOk(q2.wasRendered, "#1.1");
+  assert.notOk(q3.wasRendered, "#2.1");
+  survey.nextPage();
+  assert.ok(q2.isAnswered, "#3");
+  assert.ok(q3.isAnswered, "#4");
+
+  assert.ok(q2.cssTitle.indexOf("answer") > 0, "#5");
+  assert.ok(q3.cssTitle.indexOf("answer") > 0, "#6");
+
+  survey.css.question.titleOnAnswer = prevStyle;
+});
 QUnit.test("question.startWithNewLine", function (assert) {
   const survey = new SurveyModel({
     elements: [