#6597 Rating Scale with the Dropdown display mode- A selected value d…

…isappears when the Rating is in a drop-down mode (#6624) * #6597 Rating Scale with the Dropdown display mode- A selected value disappears when the Rating is in a drop-down mode Fixes #6597 * #6597 Rating Scale with the Dropdown display mode- A selected value disappears when the Rating is in a drop-down mode - fix f-test Fixes #6597 * #6597 - fixed markup tests Fixes #6597
surveyjs · Aug 1, 2023 · ed322fc · ed322fc
1 parent 845bafe
commit ed322fc
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 6 deletions.
diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts
@@ -302,7 +302,7 @@ export class DropdownListModel extends Base {
   }
   public get showHintString(): boolean {
     return !!this.question.searchEnabled && this.hintStringLC && this.hintStringLC.indexOf(this.inputStringLC) >= 0 ||
-      !this.question.searchEnabled && this.hintStringLC && !this.question.value;
+      !this.question.searchEnabled && this.hintStringLC && this.question.isEmpty();
   }
   public get hintStringSuffix(): string {
     return this.hintString.substring(this.hintStringLC.indexOf(this.inputStringLC) + this.inputStringLC.length);

diff --git a/src/question_rating.ts b/src/question_rating.ts
@@ -167,6 +167,15 @@ export class QuestionRatingModel extends Question {
       });
   }
 
+  @property({ defaultValue: false }) inputHasValue: boolean;
+
+  public get showSelectedItemLocText(): boolean {
+    return !this.readOnly && !this.inputHasValue && !!this.selectedItemLocText;
+  }
+  public get selectedItemLocText(): LocalizableString {
+    return !this.readOnly && this.visibleRateValues.filter(v => v.value == this.value)[0]?.locText;
+  }
+
   @property({ defaultValue: true }) autoGenerate: boolean;
 
   /**
@@ -732,7 +741,8 @@ export class QuestionRatingModel extends Question {
     return this.visibleRateValues;
   }
   public get readOnlyText() {
-    return (this.displayValue || this.placeholder);
+    if (this.readOnly) return (this.displayValue || this.placeholder);
+    return this.isEmpty() ? this.placeholder : "";
   }
 
   public needResponsiveWidth() {

diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
@@ -1291,16 +1291,18 @@ frameworks.forEach((framework) => {
     };
     const ratingAsDropdownPlaceHolder = "Select...";
     const ratingAsDropdown = Selector(".sd-dropdown .sd-dropdown__value");
-    const ratingAsDropdownText = ratingAsDropdown.find("input");
+    const ratingAsDropdownPlaceholder = ratingAsDropdown.find("input");
+    const ratingAsDropdownText = ratingAsDropdown.find(".sv-string-viewer");
     await initSurvey(framework, jsonWithDropDown);
 
     await t
       .click(ratingAsDropdown)
       .click(getListItemByText("2"))
-      .expect(ratingAsDropdownText.getAttribute("placeholder")).eql("2")
+      .expect(ratingAsDropdownPlaceholder.getAttribute("placeholder")).eql("")
+      .expect(ratingAsDropdownText.withText("2").visible).ok()
 
       .pressKey("delete")
-      .expect(ratingAsDropdownText.getAttribute("placeholder")).eql(ratingAsDropdownPlaceHolder);
+      .expect(ratingAsDropdownPlaceholder.getAttribute("placeholder")).eql(ratingAsDropdownPlaceHolder);
   });
   test.page(`${url_test}${theme}/${framework}`)("Check dropdown popup width", async (t) => {
     await applyTheme(theme);

diff --git a/tests/dropdown_list_model_test.ts b/tests/dropdown_list_model_test.ts
@@ -367,6 +367,27 @@ QUnit.test("hintString test", function (assert) {
   assert.equal(dropdownListModel.hintStringSuffix, "em3", "filter from start with value, hint suffix correct");
 });
 
+QUnit.test("showHintString for zero values", function (assert) {
+  const survey = new SurveyModel({
+    questions: [{
+      type: "dropdown",
+      name: "question1",
+      hasOther: "true",
+      searchEnabled: false,
+      choices: [
+        0,
+        "1"]
+    }
+    ]
+  });
+  const question = <QuestionDropdownModel>survey.getAllQuestions()[0];
+  const dropdownListModel = new DropdownListModel(question);
+  const list: ListModel = dropdownListModel.popupModel.contentComponentData.model as ListModel;
+  dropdownListModel.inputStringRendered = "1";
+  question.value = 0;
+  assert.notOk(dropdownListModel.showHintString, "no hint");
+});
+
 QUnit.test("hintString test - no search", function (assert) {
   const survey = new SurveyModel(jsonDropdown);
   const question = <QuestionDropdownModel>survey.getAllQuestions()[0];

diff --git a/tests/markup/etalon_rating.ts b/tests/markup/etalon_rating.ts
@@ -1,4 +1,4 @@
-import { StylesManager } from "survey-core";
+import { StylesManager, DropdownListModel } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -109,6 +109,32 @@ registerMarkupTests(
     after: () => StylesManager.applyTheme("default"),
     snapshot: "rating-as-dropdown-readonly-with-value",
   },
+  {
+    name: "Test Rating question as dropdown with value focused",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "rating",
+          defaultValue: 3,
+          title: "Question title",
+          titleLocation: "hidden",
+          renderAs: "dropdown",
+          rateMax: 4,
+        }
+      ]
+    },
+    initSurvey: (survey) => {
+      let q1 = survey.getQuestionByName("name");
+      const dropdownListModel = new DropdownListModel(q1);
+      q1["dropdownListModel"] = dropdownListModel;
+      survey.focusFirstQuestionAutomatic = false;
+      q1["dropdownListModel"].onFocus(null);
+    },
+    timeout: 300,
+    removeIds: true,
+    snapshot: "rating-as-dropdown-with-value-focused",
+  },
   {
     name: "Test Rating question as wrappable items",
     json: {

diff --git a/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html b/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
@@ -0,0 +1,29 @@
+<div>
+	<div>
+		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" role="textbox" tabindex="0">
+			<div>
+				<span class="sv-string-viewer">3</span>
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Select..." autocomplete="off" inputmode="text" placeholder="" readonly="" tabindex="-1" type="text">
+			</div>
+		</div>
+		<div>
+			<div class="sv-popup sv-popup--dropdown sv-single-select-list" style="display:none;" tabindex="-1">
+				<div class="sv-popup__container">
+					<div class="sv-popup__shadow">
+						<div class="sv-popup__body-content">
+							<div class="sv-popup__scrolling-content">
+								<div class="sv-popup__content">
+									<div class="sv-list__container">
+										<div class="sv-list__empty-container" style="display:none;">
+											<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>