Merge pull request #8868 from surveyjs/issue/8861-Rating-Scale-in-Mob…

…ileDropdown-mode---The-minRateDescription-and-maxRateDescription-labels-do-not-appear-for-custom-rating-items #8861 Rating Scale in Mobile/Dropdown mode - The minRateDescription and maxRateDescription labels do not appear for custom rating items
surveyjs · Sep 28, 2024 · 9f09826 · 9f09826
2 parents d5a22e1 + b0a654c
commit 9f09826
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 10 deletions.
diff --git a/packages/survey-core/src/question_rating.ts b/packages/survey-core/src/question_rating.ts
@@ -365,6 +365,7 @@ export class QuestionRatingModel extends Question {
     }
     if (this.rateType == "smileys" && rateValues.length > 10) rateValues = rateValues.slice(0, 10);
 
+    this.visibleChoicesValue = rateValues.map((i, idx) => this.getRatingItemValue(i, idx));
     this.renderedRateItems = rateValues.map((v, i) => {
       let renderedItem = null;
       if (this.displayRateDescriptionsAsExtremeItems) {
@@ -383,22 +384,30 @@ export class QuestionRatingModel extends Question {
     var step = this.rateStep;
     while (value <= this.rateMax &&
       res.length < settings.ratingMaximumRateValueCount) {
-      let description: LocalizableString;
-      if (value === this.rateMin) {
-        description = this.minRateDescription && this.locMinRateDescription;
-      }
-      if (value === this.rateMax || res.length === settings.ratingMaximumRateValueCount) {
-        description = this.maxRateDescription && this.locMaxRateDescription;
-      }
 
-      let item = new RatingItemValue(value, description);
+      let item = new ItemValue(value);
       item.locOwner = this;
       item.ownerPropertyName = "rateValues";
       res.push(item);
       value = this.correctValue(value + step, step);
     }
     return res;
   }
+  private getRatingItemValue(item: ItemValue, index: number) {
+    if (!item) return null;
+    const value = item.value;
+    let description: LocalizableString;
+    if (value === this.rateMin) {
+      description = this.minRateDescription && this.locMinRateDescription;
+    }
+    if (value === this.rateMax || index === settings.ratingMaximumRateValueCount) {
+      description = this.maxRateDescription && this.locMaxRateDescription;
+    }
+    let newItem = new RatingItemValue(value, description);
+    newItem.locOwner = item.locOwner;
+    newItem.ownerPropertyName = item.ownerPropertyName;
+    return newItem;
+  }
 
   private correctValue(value: number, step: number): number {
     if (!value) return value;
@@ -835,8 +844,9 @@ export class QuestionRatingModel extends Question {
   public isItemSelected(item: ItemValue): boolean {
     return item.value == this.value;
   }
+  private visibleChoicesValue: ItemValue[];
   public get visibleChoices(): ItemValue[] {
-    return this.visibleRateValues;
+    return this.visibleChoicesValue;
   }
   public get readOnlyText() {
     if (this.readOnly) return (this.displayValue || this.placeholder);

diff --git a/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue b/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue
@@ -11,7 +11,7 @@
 import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 
-const props = defineProps<{ item: any }>();
+const props = defineProps<{ item: any; model: any }>();
 
 useBase(() => props.item);
 </script>
diff --git a/tests/markup/etalon_rating.ts b/tests/markup/etalon_rating.ts
@@ -104,6 +104,38 @@ registerMarkupTests(
     after: () => StylesManager.applyTheme("default"),
     snapshot: "rating-as-dropdown",
   },
+  {
+    name: "Test Rating question as dropdown with description",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "rating",
+          title: "Question title",
+          titleLocation: "hidden",
+          minRateDescription: "mimimi",
+          maxRateDescription: "mamama",
+          displayMode: "dropdown",
+          rateValues: [
+            1,
+            2,
+            3,
+            4
+          ]
+        }
+      ]
+    },
+    initSurvey: (survey) => {
+      let q1 = survey.getQuestionByName("name");
+      const dropdownListModel = new DropdownListModel(q1);
+      q1["dropdownListModel"] = dropdownListModel;
+      dropdownListModel["popupModel"].isVisible = true;
+    },
+    removeIds: true,
+    before: () => StylesManager.applyTheme("defaultV2"),
+    after: () => StylesManager.applyTheme("default"),
+    snapshot: "rating-as-dropdown-description",
+  },
   {
     name: "Test Rating question as dropdown readonly",
     json: {

diff --git a/tests/markup/snapshots/rating-as-dropdown-description.snap.html b/tests/markup/snapshots/rating-as-dropdown-description.snap.html
@@ -0,0 +1,65 @@
+<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+	<div class="sv-dropdown_select-wrapper">
+		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" role="textbox" tabindex="0">
+			<div class="sd-dropdown__value">
+				<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+			</div>
+		</div>
+		<div>
+			<div class="sv-dropdown-popup sv-popup sv-popup--dropdown sv-single-select-list" tabindex="-1">
+				<div class="sv-popup__container">
+					<div class="sv-popup__body-content">
+						<div class="sv-popup__scrolling-content">
+							<div class="sv-popup__content">
+								<div class="sd-list 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>
+									<ul class="sv-list" role="listbox">
+										<li aria-selected="false" class="sd-list__item sv-list__item" role="option" tabindex="-1">
+											<div class="sd-list__item-body sv-list__item-body" style="padding-inline-start:16px;" title="1">
+												<div class="sd-rating-dropdown-item">
+													<span class="sd-rating-dropdown-item_text">1</span>
+													<div class="sd-rating-dropdown-item_description">
+														<span class="sv-string-viewer">mimimi</span>
+													</div>
+												</div>
+											</div>
+										</li>
+										<li aria-selected="false" class="sd-list__item sv-list__item" role="option" tabindex="-1">
+											<div class="sd-list__item-body sv-list__item-body" style="padding-inline-start:16px;" title="2">
+												<div class="sd-rating-dropdown-item">
+													<span class="sd-rating-dropdown-item_text">2</span>
+												</div>
+											</div>
+										</li>
+										<li aria-selected="false" class="sd-list__item sv-list__item" role="option" tabindex="-1">
+											<div class="sd-list__item-body sv-list__item-body" style="padding-inline-start:16px;" title="3">
+												<div class="sd-rating-dropdown-item">
+													<span class="sd-rating-dropdown-item_text">3</span>
+												</div>
+											</div>
+										</li>
+										<li aria-selected="false" class="sd-list__item sv-list__item" role="option" tabindex="-1">
+											<div class="sd-list__item-body sv-list__item-body" style="padding-inline-start:16px;" title="4">
+												<div class="sd-rating-dropdown-item">
+													<span class="sd-rating-dropdown-item_text">4</span>
+												</div>
+											</div>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div aria-hidden="true" class="sd-dropdown_chevron-button">
+			<svg class="sd-dropdown_chevron-button-svg sv-svg-icon" role="img">
+				<use xlink:href="#icon-chevron" class="">
+				</use>
+			</svg>
+		</div>
+	</div>
+</div>