Multi-Select Matrix - The Other area is not automatically focused fix… (

#8883) * Multi-Select Matrix - The Other area is not automatically focused fix #8878 * Fix functional test #8878
surveyjs · Oct 2, 2024 · 4d5929c · 4d5929c
1 parent 40cb05f
commit 4d5929c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git 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
@@ -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" } } });
+  });
 });