[React] Carry Forward Choices - Uncaught TypeError: Cannot read prope…

src/dragdrop/ranking-choices.ts

@@ -82,10 +82,13 @@ export class DragDropRankingChoices extends DragDropChoices {
     const node = this.domAdapter.draggedElementShortcut.querySelector<HTMLElement>(".sv-ranking-item");
     node.style.cursor = "grabbing";
   };
-  public getIndixies(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>) {
+  public getIndices(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>) {
     let fromIndex = fromChoicesArray.indexOf(this.draggedElement);
     let toIndex = toChoicesArray.indexOf(this.dropTarget);
-
+    if(fromIndex < 0 && !!this.draggedElement) {
+      this.draggedElement = ItemValue.getItemByValue(fromChoicesArray, this.draggedElement.value) || this.draggedElement;
+      fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+    }
     if (toIndex === -1) {
       const length = model.value.length;
       toIndex = length;
@@ -100,7 +103,7 @@ export class DragDropRankingChoices extends DragDropChoices {
   }
 
   protected afterDragOver(dropTargetNode: HTMLElement): void {
-    const { fromIndex, toIndex } = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices);
+    const { fromIndex, toIndex } = this.getIndices(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices);
     this.reorderRankedItem(this.parentElement as QuestionRankingModel, fromIndex, toIndex);
   }
 

src/dragdrop/ranking-select-to-rank.ts

@@ -78,7 +78,7 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
   ): void {
     const questionModel: any = this.parentElement;
 
-    let { fromIndex, toIndex } = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray);
+    let { fromIndex, toIndex } = this.getIndices(questionModel, fromChoicesArray, toChoicesArray);
 
     rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
   }

src/question_ranking.ts

@@ -376,7 +376,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     return new DragDropRankingChoices(this.survey, null, this.longTap);
   }
 
-  private draggedChoise: ItemValue;
+  private draggedChoiceValue: any;
   private draggedTargetNode: HTMLElement;
   public handlePointerDown = (
     event: PointerEvent,
@@ -394,14 +394,15 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
       this.canStartDragDueItemEnabled(choice)
     )
     {
-      this.draggedChoise = choice;
+      this.draggedChoiceValue = choice.value;
       this.draggedTargetNode = node;
       this.dragOrClickHelper.onPointerDown(event);
     }
   };
 
   public startDrag = (event: PointerEvent): void => {
-    this.dragDropRankingChoices.startDrag(event, this.draggedChoise, this, this.draggedTargetNode);
+    const choice = ItemValue.getItemByValue(this.activeChoices, this.draggedChoiceValue);
+    this.dragDropRankingChoices.startDrag(event, choice, this, this.draggedTargetNode);
   }
 
   public handlePointerUp = (

testCafe/questions/ranking.js

@@ -367,4 +367,46 @@ frameworks.forEach((framework) => {
     const value = await getValue();
     await t.expect(value).eql(["BMW", "Ford"]);
   });
+});
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${urlV2}${framework}`.beforeEach(
+    async (ctx) => {
+      const json = {
+        elements: [
+          {
+            type: "checkbox",
+            name: "q1",
+            choices: ["Item1", "Item2", "Item3"],
+            showOtherItem: true,
+          },
+          {
+            type: "ranking",
+            name: "q2",
+            choicesFromQuestion: "q1",
+            choicesFromQuestionMode: "selected",
+          },
+        ],
+      };
+      await applyTheme("defaultV2");
+      await initSurvey(framework, json);
+    }
+  );
+
+  test("Carry forward error with others Bug#8462", async (t) => {
+    await t.click(Selector(".sv-string-viewer").withText("Item1"))
+      .click(Selector(".sv-string-viewer").withText("Item3"))
+      .click(Selector(".sv-string-viewer").withText("Other (describe)"))
+      .click(Selector("textarea"))
+      .pressKey("A B C");
+    const item1 = Selector("span").withText("q2").parent("[data-name]").find("span").withText("Item1");
+
+    await t.hover(item1);
+    await t.drag(item1, 5, 40, { speed: 0.1 });
+    const getValue = ClientFunction(()=>{
+      return window["survey"].getAllQuestions()[0].value;
+    });
+
+    const value = await getValue();
+    await t.expect(value).eql(["Item1", "Item3", "other"]);
+  });
 });

tests/dragdrophelpertests.ts

@@ -318,56 +318,56 @@ QUnit.test("DragDropRankingSelectToRank reorderRankedItem", function (assert) {
   assert.equal(questionModel.rankingChoices.length, 2, "rankingChoices count");
 });
 
-QUnit.test("DragDropRankingSelectToRank getIndixies", function (assert) {
+QUnit.test("DragDropRankingSelectToRank getIndices", function (assert) {
   const withDefaultValue = true;
   const dndModel = new DragDropRankingSelectToRank();
   const questionModel = createRankingQuestionModel(withDefaultValue);
-  let toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
+  let toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
   assert.equal(toIndex, 2);
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 2);
 
   dndModel.draggedElement = questionModel.rankingChoices[0];
   dndModel.dropTarget = questionModel.rankingChoices[1];
   dndModel["_isBottom"] = false;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 0);
 
   dndModel.draggedElement = questionModel.rankingChoices[0];
   dndModel.dropTarget = questionModel.rankingChoices[1];
   dndModel["_isBottom"] = true;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 1);
 
   dndModel.draggedElement = questionModel.rankingChoices[1];
   dndModel.dropTarget = questionModel.rankingChoices[0];
   dndModel["_isBottom"] = false;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 0);
 
   dndModel.draggedElement = questionModel.rankingChoices[1];
   dndModel.dropTarget = questionModel.rankingChoices[0];
   dndModel["_isBottom"] = true;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 1);
 
   dndModel.dropTarget = questionModel.unRankingChoices[0];
   dndModel.draggedElement = questionModel.rankingChoices[1];
   dndModel["_isBottom"] = true;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
   assert.equal(toIndex, 1);
 
   dndModel["_isBottom"] = false;
   dndModel.dropTarget = questionModel.unRankingChoices[0];
   dndModel.draggedElement = questionModel.rankingChoices[1];
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.unRankingChoices).toIndex;
   assert.equal(toIndex, 0);
 
   questionModel.value = ["11", "22", "33"];
   dndModel.draggedElement = questionModel.rankingChoices[0];
   dndModel.dropTarget = questionModel.rankingChoices[1];
   dndModel["_isBottom"] = true;
-  toIndex = dndModel.getIndixies(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
+  toIndex = dndModel.getIndices(questionModel, questionModel.rankingChoices, questionModel.rankingChoices).toIndex;
   assert.equal(toIndex, 1);
 });
 // EO selectToRankEnabled