#7032 Rating Stars Question on mobile - Rates selection is not workin…

…g smoothly Fixes #7032
surveyjs · Sep 29, 2023 · 6b57bec · 6b57bec
1 parent d69bfca
commit 6b57bec
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/question_rating.ts b/src/question_rating.ts
@@ -11,6 +11,7 @@ import { mergeValues } from "./utils/utils";
 import { DropdownListModel } from "./dropdownListModel";
 import { SurveyModel } from "./survey";
 import { ISurveyImpl } from "./base-interfaces";
+import { IsTouch } from "./utils/devices";
 
 export class RenderedRatingItem extends Base {
   private onStringChangedCallback() {
@@ -553,6 +554,7 @@ export class QuestionRatingModel extends Question {
     }
   }
   public onItemMouseIn(item: RenderedRatingItem) {
+    if (IsTouch) return;
     if (this.isReadOnly || !item.itemValue.isEnabled || this.isDesignMode) return;
     let high = true;
     let selected = this.value != null;
@@ -567,6 +569,7 @@ export class QuestionRatingModel extends Question {
     }
   }
   public onItemMouseOut(item: RenderedRatingItem) {
+    if (IsTouch) return;
     this.renderedRateItems.forEach(item => item.highlight = "none");
   }
 

diff --git a/tests/question_ratingtests.ts b/tests/question_ratingtests.ts
@@ -8,6 +8,7 @@ import { ListModel } from "../src/list";
 import { ItemValue } from "../src/itemvalue";
 import { QuestionMatrixDropdownModel } from "../src/question_matrixdropdown";
 import { settings } from "../src/settings";
+import { _setIsTouch } from "../src/utils/devices";
 
 QUnit.test("check allowhover class in design mode", (assert) => {
   var json = {
@@ -460,6 +461,39 @@ QUnit.test("check stars highlighting design mode", (assert) => {
   assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "");
 });
 
+QUnit.test("check stars highlighting on touch device", (assert) => {
+  var json = {
+    questions: [
+      {
+        type: "rating",
+        rateType: "stars",
+        name: "q1",
+      },
+    ],
+  };
+  _setIsTouch(true);
+  const survey = new SurveyModel(json);
+  survey.setDesignMode(true);
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  q1.cssClasses.itemStar = "";
+  q1.cssClasses.itemStarHighlighted = "sv_q_high";
+  q1.cssClasses.itemStarUnhighlighted = "sv_q_unhigh";
+
+  assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "");
+
+  q1.onItemMouseIn(q1.renderedRateItems[3]);
+  assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "");
+  _setIsTouch(false);
+});
+
 QUnit.test("check stars styles", (assert) => {
   var json = {
     questions: [