#9410 Dynamic matrix - In mobile view Show Detail/Hide Details button…

…s incorrect label issue Fixes #9410
surveyjs · Feb 7, 2025 · 0a23154 · 0a23154
1 parent 4023882
commit 0a23154
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/functionalTests/questions/matrixdynamic.js b/functionalTests/questions/matrixdynamic.js
@@ -325,7 +325,58 @@ frameworks.forEach((framework) => {
     const surveyResult = await getSurveyResult();
     await t.expect(surveyResult.matrix.length).eql(1);
   });
+
+  test("show/hide details mobile", async (t) => {
+    await ClientFunction(() => window.survey.setIsMobile(true))();
+    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");
+  });
 });
+
 const json4 = {
   "textUpdateMode": "onTyping",
   "focusFirstQuestionAutomatic": true,

diff --git a/packages/survey-core/src/question_matrixdropdownrendered.ts b/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();
             },
           })