"Cannot read properties of undefined (reading 'withFrame')" is thrown when questionsOnPageMode: "inputPerPage" and survey.data is specified from code fix #10653 (#10658)

Author: andrewtelnov

packages/survey-core/src/question.ts

@@ -662,7 +662,7 @@ export class Question extends SurveyElement<Question>
       }
     }
     if (val !== this.visible && this.areInvisibleElementsShowing) {
-      this.updateQuestionCss(true);
+      this.updateQuestionCss();
     }
   }
   /**
@@ -1804,24 +1804,22 @@ export class Question extends SurveyElement<Question>
     if (this.wasRendered) {
       super.updateElementCss(reNew);
       if (reNew) {
-        this.updateQuestionCss(true);
+        this.updateQuestionCss();
       }
     } else {
       this.clearCssClasses();
     }
     this.resetIndents();
   }
-  protected updateQuestionCss(reNew?: boolean): void {
-    if (this.isLoadingFromJson || !this.survey) return;
+  private updateQuestionCss(): void {
+    if (this.isLoadingFromJson || !this.survey || this.isDisposed) return;
     if (this.wasRendered) {
       this.updateElementCssCore(this.cssClasses);
-    } else {
-      this.isRequireUpdateElements = true;
     }
   }
   private ensureElementCss() {
     if (!this.cssClassesValue) {
-      this.updateQuestionCss(true);
+      this.updateQuestionCss();
     }
   }
   protected updateElementCssCore(cssClasses: any): void {

packages/survey-core/src/question_file.ts

@@ -421,8 +421,8 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   protected updateElementCssCore(cssClasses: any): void {
     super.updateElementCssCore(cssClasses);
-    this.prevFileAction.iconName = this.cssClasses.leftIconId;
-    this.nextFileAction.iconName = this.cssClasses.rightIconId;
+    this.prevFileAction.iconName = cssClasses.leftIconId;
+    this.nextFileAction.iconName = cssClasses.rightIconId;
     this.updateCurrentMode();
   }
   private getFileIndexCaption(): string {

packages/survey-core/src/question_matrix.ts

@@ -618,13 +618,20 @@ export class QuestionMatrixModel
     this.nestedQuestionsValue = res;
     return res;
   }
-  public resetSingleInput(): void {
-    super.resetSingleInput();
+  private disposeNestedQuestions(): void {
     if (this.nestedQuestionsValue) {
       this.nestedQuestionsValue.forEach(q => q.dispose());
       this.nestedQuestionsValue = null;
     }
   }
+  public resetSingleInput(): void {
+    this.disposeNestedQuestions();
+    super.resetSingleInput();
+  }
+  public dispose(): void {
+    this.disposeNestedQuestions();
+    super.dispose();
+  }
   //#region For simple radiogroup questions setSurveyImpl
   getSurveyData(): ISurveyData { return this; }
   getTextProcessor(): ITextProcessor { return this.surveyImpl?.getTextProcessor(); }

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

@@ -672,21 +672,19 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   private get css(): any {
     return !!this.survey ? this.survey.getCss() : {};
   }
-  private isCssValueCalculating: boolean;
   public get cssClassesValue(): any {
-    let res = this.getPropertyValueWithoutDefault("cssClassesValue");
-    if (!res && !this.isCssValueCalculating) {
-      this.isCssValueCalculating = true;
-      res = this.createCssClassesValue();
-      this.isCssValueCalculating = false;
-    }
-    return res;
+    return this.getPropertyValue("cssClassesValue", undefined, () => this.createCssClassesValue());
   }
+  private isCalculatingCssClasses: boolean;
   private createCssClassesValue(): any {
+    const callOnCalc = this.isCalculatingCssClasses;
+    this.isCalculatingCssClasses = true;
     const res = this.calcCssClasses(this.css);
-    this.setPropertyValue("cssClassesValue", res);
-    this.onCalcCssClasses(res);
-    this.updateElementCssCore(this.cssClassesValue);
+    if (!callOnCalc) {
+      this.onCalcCssClasses(res);
+    }
+    this.updateElementCssCore(res);
+    this.isCalculatingCssClasses = false;
     return res;
   }
   protected onCalcCssClasses(classes: any): void {}
@@ -703,11 +701,7 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
    * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
    */
   public get cssClasses(): any {
-    const _dummy = this.cssClassesValue;
     if (!this.survey) return this.calcCssClasses(this.css);
-    if (!this.cssClassesValue) {
-      this.createCssClassesValue();
-    }
     return this.cssClassesValue;
   }
   public get cssTitleNumber(): any {

packages/survey-core/tests/inputPerPageTests.ts

@@ -2429,3 +2429,161 @@ QUnit.test("Do not show summary page on request, Issue#10435", assert => {
   assert.equal(survey.currentSingleQuestion.name, "q3", "currentSingleQuestion is q3, #3");
   assert.equal(addBtn.visible, false, "addBtn.visible, #3");
 });
+QUnit.test("Cannot read properties of undefined  with survey.data, Bug #10653", assert => {
+  const survey = new SurveyModel({
+    questionsOnPageMode: "inputPerPage",
+    pages: [
+      {
+        name: "page1",
+        elements: [
+          {
+            type: "matrix",
+            name: "qualities",
+            title:
+            "Please indicate if you agree or disagree with the following statements",
+            columns: [
+              {
+                value: 5,
+                text: "Strongly agree",
+              },
+              {
+                value: 4,
+                text: "Agree",
+              },
+              {
+                value: 3,
+                text: "Neutral",
+              },
+              {
+                value: 2,
+                text: "Disagree",
+              },
+              {
+                value: 1,
+                text: "Strongly disagree",
+              },
+            ],
+            rows: [
+              {
+                value: "affordable",
+                text: "Product is affordable",
+              },
+              {
+                value: "does-what-it-claims",
+                text: "Product does what it claims",
+              },
+              {
+                value: "better-than-others",
+                text: "Product is better than other products on the market",
+              },
+              {
+                value: "easy-to-use",
+                text: "Product is easy to use",
+              },
+            ],
+          },
+          {
+            type: "rating",
+            name: "satisfaction-score",
+            title: "How satisfied are you with our product?",
+            minRateDescription: "Not satisfied",
+            maxRateDescription: "Completely satisfied",
+          },
+          {
+            type: "rating",
+            name: "recommend",
+            visibleIf: "{satisfaction-score} > 3",
+            title:
+            "How likely are you to recommend our product to a friend or co-worker?",
+            minRateDescription: "Will not recommend",
+            maxRateDescription: "I will recommend",
+          },
+          {
+            type: "comment",
+            name: "suggestions",
+            title: "What would make you more satisfied with our product?",
+          },
+        ],
+      },
+      {
+        name: "page2",
+        elements: [
+          {
+            type: "radiogroup",
+            name: "price-comparison",
+            title: "Compared to our competitors, do you feel our product is:",
+            choices: [
+              "Less expensive",
+              "Priced about the same",
+              "More expensive",
+              "Not sure",
+            ],
+          },
+          {
+            type: "radiogroup",
+            name: "current-price",
+            title: "Do you feel our current price is merited by our product?",
+            choices: [
+              {
+                value: "correct",
+                text: "Yes, the price is about right",
+              },
+              {
+                value: "low",
+                text: "No, the price is too low for your product",
+              },
+              {
+                value: "high",
+                text: "No, the price is too high for your product",
+              },
+            ],
+          },
+          {
+            type: "multipletext",
+            name: "price-limits",
+            title:
+            "What is the highest and lowest price you would pay for a product like ours?",
+            items: [
+              {
+                name: "highest",
+                title: "Highest",
+              },
+              {
+                name: "lowest",
+                title: "Lowest",
+              },
+            ],
+            itemTitleWidth: "60px",
+          },
+        ],
+      },
+      {
+        name: "page3",
+        elements: [
+          {
+            type: "text",
+            name: "email",
+            title:
+            "Please leave your email address if you would like us to contact you.",
+          },
+        ],
+      },
+    ],
+  });
+  survey.setIsMobile(true);
+  survey.data = {
+    qualities: {
+      affordable: 3,
+      "does-what-it-claims": 5,
+      "better-than-others": 3,
+      "easy-to-use": 2,
+    },
+    "satisfaction-score": 4,
+  };
+  assert.equal(survey.currentSingleQuestion.name, "qualities", "currentSingleQuestion is qualities, #1");
+  assert.ok(survey.currentSingleQuestion.cssClasses, "cssClasses is defined");
+  const affordable = survey.currentSingleQuestion.singleInputQuestion;
+  assert.equal(affordable.name, "affordable", "singleInputQuestion is affordable, #1");
+  assert.ok(affordable.cssClasses, "singleInputQuestion cssClasses is defined");
+  assert.ok(affordable.cssRoot, "singleInputQuestion cssRoot is defined");
+});