#9410 Dynamic matrix - In mobile view Show Detail/Hide Details buttons incorrect label issue (#9423)

* #9410 Dynamic matrix - In mobile view Show Detail/Hide Details buttons incorrect label issue
Fixes #9410

* resize before test #9410

* fixed test Dynamic matrix - In mobile view Show Detail/Hide Details buttons incorrect label issue #9410

Author: novikov82

functionalTests/questions/matrixdynamic.js

@@ -494,6 +494,7 @@ frameworks.forEach((framework) => {
   fixture`${framework} ${title}`.page`${url}${framework}`;
 
   test("Focus remove or add button removing", async (t) => {
+    await t.resizeWindow(1920, 1080);
     await initSurvey(framework, {
       focusFirstQuestionAutomatic: true,
       elements: [
@@ -526,6 +527,7 @@ frameworks.forEach((framework) => {
     await t.expect(await getSurveyResult()).eql({ matrix: [{ name: "abc123" }] });
   });
   test("Focus remove or add button removing for horizontal columns layout", async (t) => {
+    await t.resizeWindow(1920, 1080);
     await initSurvey(framework, {
       focusFirstQuestionAutomatic: true,
       elements: [
@@ -559,6 +561,7 @@ frameworks.forEach((framework) => {
     await t.expect(await getSurveyResult()).eql({ matrix: [{ name: "abc123" }] });
   });
   test("Editing cell loses focus when a dependent column appears, Bug#9233", async (t) => {
+    await t.resizeWindow(1920, 1080);
     await initSurvey(framework, {
       textUpdateMode: "onTyping",
       elements: [
@@ -596,4 +599,52 @@ frameworks.forEach((framework) => {
 
     await t.expect(await getSurveyResult()).eql({ matrix: [{ col2: "abc" }] });
   });
+  test("show/hide details mobile", async (t) => {
+    await initSurvey(framework, {
+      "title": "TEST",
+      "description": "TEST",
+      "logoPosition": "right",
+      "pages": [
+        {
+          "name": "page1",
+          "elements": [
+            {
+              "type": "matrixdynamic",
+              "name": "matrix",
+              "titleLocation": "hidden",
+              "verticalAlign": "top",
+              "columns": [
+                {
+                  "name": "header",
+                  "cellType": "text",
+                },
+              ],
+              "detailElements": [
+                {
+                  "name": "detail",
+                  "type": "text",
+                },
+              ],
+              "detailPanelMode": "underRowSingle",
+              "cellType": "text",
+              "rowCount": 1,
+              "addRowLocation": "top",
+              "hideColumnsIfEmpty": true,
+              "detailPanelShowOnAdding": true
+            }
+          ]
+        }
+      ],
+      "showNavigationButtons": "none",
+      "showQuestionNumbers": "off"
+    });
+    await t.resizeWindow(600, 1080);
+    await t.click(Selector("button").withText("Add Row"));
+    await t.expect(Selector("#show-detail-mobile").filterVisible().nth(0).innerText).contains("Show Details");
+    await t.expect(Selector("#show-detail-mobile").filterVisible().nth(1).innerText).contains("Hide Details");
+
+    await t.click(Selector("#show-detail-mobile button").filterVisible().nth(0));
+    await t.expect(Selector("#show-detail-mobile").filterVisible().nth(0).innerText).contains("Hide Details");
+    await t.expect(Selector("#show-detail-mobile").filterVisible().nth(1).innerText).contains("Show Details");
+  });
 });

packages/survey-core/src/question_matrixdropdownrendered.ts

@@ -1,6 +1,6 @@
 import { property, propertyArray } from "./jsonobject";
 import { Question } from "./question";
-import { Base } from "./base";
+import { Base, ComputedUpdater } from "./base";
 import { ItemValue } from "./itemvalue";
 import { LocalizableString } from "./localizablestring";
 import { PanelModel } from "./panel";
@@ -763,11 +763,10 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
         actions.unshift(
           new Action({
             id: "show-detail-mobile",
-            title: "Show Details",
+            title: <any>new ComputedUpdater(() => row.isDetailPanelShowing ? this.matrix.getLocalizationString("hideDetails") : this.matrix.getLocalizationString("showDetails")),
             showTitle: true,
             location: "end",
             action: (context) => {
-              context.title = row.isDetailPanelShowing ? this.matrix.getLocalizationString("showDetails") : this.matrix.getLocalizationString("hideDetails");
               row.showHideDetailPanelClick();
             },
           })