Rating Scale - Issues with the display mode setting fix #8248

surveyjs · May 7, 2024 · 2a134fe · 2a134fe
1 parent 2cb0996
commit 2a134fe
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/src/question_rating.ts b/src/question_rating.ts
@@ -78,6 +78,9 @@ export class QuestionRatingModel extends Question {
       () => {
         this.updateColors((this.survey as SurveyModel).themeVariables);
       });
+    this.registerFunctionOnPropertiesValueChanged(["displayMode"], () => {
+      this.updateRenderAsBasedOnDisplayMode();
+    });
     this.registerSychProperties(["autoGenerate"],
       () => {
         if (!this.autoGenerate && this.rateValues.length === 0) {
@@ -499,18 +502,16 @@ export class QuestionRatingModel extends Question {
   * [View Demo](https://surveyjs.io/form-library/examples/ui-adaptation-modes-for-rating-scale/ (linkStyle))
   * @see rateType
   */
-  @property({
-    onSet: (val: string, target: QuestionRatingModel) => {
-      if (!target.isDesignMode) {
-        if (val === "dropdown") {
-          target.renderAs = "dropdown";
-        } else {
-          target.renderAs = "default";
-        }
-      }
-    }
-  }) displayMode: "dropdown" | "buttons" | "auto";
-
+  @property() displayMode: "dropdown" | "buttons" | "auto";
+  private updateRenderAsBasedOnDisplayMode(): void {
+    if(this.renderAs !== "default" && this.renderAs !== "dropdown") return;
+    const newVal = !this.isDesignMode && this.displayMode === "dropdown" ? this.displayMode : "default";
+    this.renderAs = newVal;
+  }
+  public onSurveyLoad(): void {
+    super.onSurveyLoad();
+    this.updateRenderAsBasedOnDisplayMode();
+  }
   /**
   * Specifies the alignment of [`minRateDescription`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#minRateDescription) and [`maxRateDescription`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#maxRateDescription) texts.
   *
@@ -894,6 +895,7 @@ export class QuestionRatingModel extends Question {
     super.setSurveyImpl(value, isLight);
     if (!this.survey) return;
     this.updateColors((this.survey as SurveyModel).themeVariables);
+    this.updateRenderAsBasedOnDisplayMode();
   }
   public dispose(): void {
     super.dispose();

diff --git a/tests/question_ratingtests.ts b/tests/question_ratingtests.ts
@@ -1554,6 +1554,28 @@ QUnit.test("rating items custom component", (assert) => {
   const q2 = <QuestionRatingModel>survey2.getQuestionByName("q1");
   assert.equal(q2.itemComponent, "custom-item");
 });
+QUnit.test("renderAs and copying in design-time", (assert) => {
+  var json = {
+    questions: [
+      {
+        type: "rating",
+        name: "q1",
+        displayMode: "dropdown"
+      },
+    ],
+  };
+  const survey = new SurveyModel();
+  survey.setDesignMode(true);
+  survey.fromJSON(json);
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  assert.equal(q1.renderAs, "default", "q1.renderAs, #1");
+  const q2 = new QuestionRatingModel("q1");
+  q2.displayMode = "dropdown";
+  assert.equal(q2.renderAs, "dropdown", "q2.renderAs, #2");
+  survey.pages[0].addElement(q2);
+  assert.equal(q2.renderAs, "default", "q2.renderAs, #3");
+});
+
 QUnit.test("Generate empty rating", (assert) => {
   const q1 = new QuestionRatingModel("q1");
   assert.deepEqual(q1.toJSON(), { name: "q1" });