Ranking performance issue. fix #8108 (#8114)

src/actions/action.ts

@@ -201,7 +201,10 @@ export function getActionDropdownButtonTarget(container: HTMLElement): HTMLEleme
 }
 
 export abstract class BaseAction extends Base implements IAction {
+  private static renderedId = 1;
+  private static getNextRendredId(): number { return BaseAction.renderedId ++; }
   private cssClassesValue: any;
+  private rendredIdValue = BaseAction.getNextRendredId();
   private ownerValue: ILocalizableOwner;
   @property() tooltip: string;
   @property() showTitle: boolean;
@@ -229,6 +232,7 @@ export abstract class BaseAction extends Base implements IAction {
   minDimension: number;
   maxDimension: number;
 
+  public get renderedId(): number { return this.rendredIdValue; }
   public get owner(): ILocalizableOwner { return this.ownerValue; }
   public set owner(val: ILocalizableOwner) {
     if(val !== this.owner) {

src/question_ranking.ts

@@ -58,7 +58,9 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
       .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "vertical")
       .toString();
   }
-
+  protected isItemSelectedCore(item: ItemValue): boolean {
+    return false;
+  }
   protected getItemClassCore(item: ItemValue, options: any): string {
     const itemIndex = this.rankingChoices.indexOf(item);
     const unrankedItemIndex = this.unRankingChoices.indexOf(item);

src/react/reactquestion_ranking.tsx

@@ -87,10 +87,10 @@ export class SurveyQuestionRanking extends SurveyQuestionElementBase {
     question: QuestionRankingModel,
     unrankedItem?: boolean
   ): JSX.Element {
-    const key: string = item.value + "-" + i + "-item";
+    const key: string = "id-" + item.renderedId;
     const text: JSX.Element = this.renderLocString(item.locText);
     const index = i;
-    const indexText: string = this.question.getNumberByIndex(i);
+    const indexText: string = this.question.getNumberByIndex(index);
     const tabIndex: number = this.question.getItemTabIndex(item);
     const renderedItem = (
       <SurveyQuestionRankingItem

tests/question_ranking_tests.ts

@@ -354,6 +354,24 @@ QUnit.test("Ranking: rankingDragHandleArea Setting ", function(assert) {
 
   dragStartTargetNode.remove();
 });
+QUnit.test("Ranking: isItemSelected() returns always false for optimization", function(assert) {
+  let result;
+  let dragStartTargetNode;
+
+  var survey = new SurveyModel({
+    elements: [
+      {
+        type: "ranking",
+        name: "q1",
+        choices: ["a", "b", "c"],
+      },
+    ],
+  });
+  const rankingQuestion = <QuestionRankingModel>survey.getQuestionByName("q1");
+  assert.equal(rankingQuestion.isItemSelected(rankingQuestion.choices[0]), false, "#1");
+  rankingQuestion.value = ["b", "c", "a"];
+  assert.equal(rankingQuestion.isItemSelected(rankingQuestion.choices[0]), false, "#2");
+});
 
 QUnit.test("Ranking: separateSpecialChoices ", function (assert) {
   const prop = "separateSpecialChoices";