From 4d5929c2f76e1ef084e26b9b40ad5f80146907dd Mon Sep 17 00:00:00 2001
From: Andrew <andrew.telnov@gmail.com>
Date: Wed, 2 Oct 2024 09:15:50 +0300
Subject: [PATCH] =?UTF-8?q?Multi-Select=20Matrix=20-=20The=20Other=20area?=
 =?UTF-8?q?=20is=20not=20automatically=20focused=20fix=E2=80=A6=20(#8883)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Multi-Select Matrix - The Other area is not automatically focused fix #8878

* Fix functional test #8878
---
 .../survey-core/src/question_baseselect.ts    | 22 +++----------
 testCafe/questions/dropdown.js                | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/survey-core/src/question_baseselect.ts b/packages/survey-core/src/question_baseselect.ts
index 68c9fa52da..7a8a6954f6 100644
--- a/packages/survey-core/src/question_baseselect.ts
+++ b/packages/survey-core/src/question_baseselect.ts
@@ -11,6 +11,7 @@ import { LocalizableString } from "./localizablestring";
 import { ConditionRunner } from "./conditions";
 import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
+import { SurveyElement } from "./survey-element";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { ITextArea, TextAreaModel } from "./utils/text-area";
 import { cleanHtmlElementAfterAnimation, mergeValues, prepareElementForVerticalAnimation, setPropertiesOnElementForAnimation } from "./utils/utils";
@@ -579,6 +580,9 @@ export class QuestionSelectBase extends Question {
     return this.otherValueCore;
   }
   protected selectOtherValueFromComment(val: boolean): void {
+    if(val) {
+      this.prevIsOtherSelected = true;
+    }
     this.value = val ? this.otherItem.value : undefined;
   }
   private isSettingComment: boolean = false;
@@ -2018,24 +2022,8 @@ export class QuestionSelectBase extends Question {
   public getItemEnabled(item: ItemValue) {
     return !this.isDisabledAttr && item.isEnabled;
   }
-  protected rootElement: HTMLElement;
-  public afterRender(el: HTMLElement) {
-    super.afterRender(el);
-    this.rootElement = el;
-  }
-  public beforeDestroyQuestionElement(el: HTMLElement): void {
-    super.beforeDestroyQuestionElement(el);
-    this.rootElement = undefined;
-  }
   private focusOtherComment() {
-    if (!!this.rootElement) {
-      setTimeout(() => {
-        const commentEl = this.rootElement.querySelector("textarea");
-        if (!!commentEl) {
-          commentEl.focus();
-        }
-      }, 10);
-    }
+    SurveyElement.FocusElement(this.otherId);
   }
   private prevIsOtherSelected: boolean = false;
   protected onValueChanged(): void {
diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
index 03d58c0bcd..bd104ca837 100644
--- a/testCafe/questions/dropdown.js
+++ b/testCafe/questions/dropdown.js
@@ -2200,4 +2200,36 @@ frameworks.forEach((framework) => {
     let surveyResult = await getSurveyResult();
     await t.expect(surveyResult).eql({ "q1-Comment": "ABC" });
   });
+});
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
+    async (t) => {
+      await t.resizeWindow(800, 600);
+      const json = { elements: [{
+        type: "matrixdropdown",
+        name: "q1",
+        columns: [
+          {
+            name: "col1",
+            cellType: "dropdown",
+            showOtherItem: true,
+            choices: [1, 2, 3],
+            otherText: "Other"
+          }
+        ],
+        "rows": ["row1"]
+      }] };
+      await initSurvey(framework, json);
+    }
+  );
+  test("Move to comment on choosing other #8878", async (t) => {
+    await t
+      .click(questionDropdownSelect)
+      .click(getListItemByText("Other"))
+      .pressKey("A B C")
+      .click(completeButton);
+
+    let surveyResult = await getSurveyResult();
+    await t.expect(surveyResult).eql({ q1: { row1: { col1: "other", "col1-Comment": "ABC" } } });
+  });
 });
\ No newline at end of file