Work for #8065: do not animate ranking choices when use keyboard (#8083)

src/question_ranking.ts

@@ -448,13 +448,17 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
 
     if (key === " " && !isMovedElementRanked) {
       toIndex = 0;
+      this.animationAllowed = false;
       dnd.selectToRank(this, fromIndex, toIndex);
+      this.animationAllowed = true;
       this.setValueAfterKeydown(toIndex, "to-container");
       return;
     }
     if(!isMovedElementRanked) return;
     if (key === " ") {
+      this.animationAllowed = false;
       dnd.unselectFromRank(this, fromIndex);
+      this.animationAllowed = true;
       toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
       this.setValueAfterKeydown(toIndex, "from-container");
       return;

tests/question_ranking_tests.ts

@@ -1,7 +1,7 @@
 import { QuestionCheckboxModel } from "../src/question_checkbox";
 import { QuestionRankingModel } from "../src/question_ranking";
 import { SurveyModel } from "../src/survey";
-import { settings as Settings } from "../src/settings";
+import { settings as Settings, settings } from "../src/settings";
 import { Serializer } from "../src/jsonobject";
 import { ItemValue } from "../src/itemvalue";
 
@@ -278,6 +278,43 @@ QUnit.test("Ranking: design mode", function (assert) {
   assert.equal(preventDefaultCalled, 2);
 });
 
+QUnit.test("Ranking: selectToRank key navigation with animation", function (assert) {
+  var survey = new SurveyModel({
+    elements: [
+      {
+        type: "ranking",
+        name: "q",
+        choices: ["a", "b", "c"],
+        selectToRankEnabled: true
+      },
+    ],
+  });
+
+  const q = <QuestionRankingModel>survey.getAllQuestions()[0];
+  q["focusItem"] = () => {};
+  (window as any).event = { preventDefault: () => {} };
+
+  settings.animationEnabled = true;
+  q.handleKeydown(<any>{ key: " ", preventDefault: () => {} }, q.choices[1]);
+  assert.deepEqual(q.unRankingChoices.map((item) => item.value), ["a", "c"]);
+  assert.deepEqual(q.rankingChoices.map((item) => item.value), ["b"]);
+
+  q.handleKeydown(<any>{ key: " ", preventDefault: () => {} }, q.choices[0]);
+  assert.deepEqual(q.unRankingChoices.map((item) => item.value), ["c"]);
+  assert.deepEqual(q.rankingChoices.map((item) => item.value), ["a", "b"]);
+
+  q.handleKeydown(<any>{ key: " ", preventDefault: () => {} }, q.choices[1]);
+  assert.deepEqual(q.unRankingChoices.map((item) => item.value), ["b", "c"]);
+  assert.deepEqual(q.rankingChoices.map((item) => item.value), ["a"]);
+
+  q.handleKeydown(<any>{ key: " ", preventDefault: () => {} }, q.choices[0]);
+  assert.deepEqual(q.unRankingChoices.map((item) => item.value), ["a", "b", "c"]);
+  assert.deepEqual(q.rankingChoices.map((item) => item.value), []);
+
+  (window as any).event = undefined;
+  settings.animationEnabled = false;
+});
+
 QUnit.test("Ranking: rankingDragHandleArea Setting ", function(assert) {
   let result;
   let dragStartTargetNode;