Merge pull request #9089 from surveyjs/bug/9068-removal-confirmation-…

…dialog Dynamic Matrix / Panel - An entry removal confirmation dialog appears without margings/paddings on mobile devices
surveyjs · Nov 23, 2024 · 375152c · 375152c
2 parents 67f05a8 + feb979c
commit 375152c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/packages/survey-core/src/common-styles/sv-popup.scss b/packages/survey-core/src/common-styles/sv-popup.scss
@@ -120,6 +120,10 @@ sv-popup {
   }
 }
 
+.sd-root-modern--mobile .sv-popup--confirm-delete .sv-popup__body-content {
+  min-width: auto;
+}
+
 .sv-popup--overlay {
   width: 100%;
   height: $popup-overlay-height;

diff --git a/...ionTests/tests/defaultV2/etalons/matrixdynamic-delete-confirm-dialog-mobile.png b/...ionTests/tests/defaultV2/etalons/matrixdynamic-delete-confirm-dialog-mobile.png
diff --git a/...RegressionTests/tests/defaultV2/etalons/matrixdynamic-delete-confirm-dialog.png b/...RegressionTests/tests/defaultV2/etalons/matrixdynamic-delete-confirm-dialog.png
diff --git a/visualRegressionTests/tests/defaultV2/matrixdynamic.ts b/visualRegressionTests/tests/defaultV2/matrixdynamic.ts
@@ -253,6 +253,43 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check Matrixdynamic delete confirm dialog", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1280, 1100);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "matrixdynamic",
+                "name": "question1",
+                "defaultValue": [
+                  { "Column 1": 1, "Column 2": 2, "Column 3": 3 },
+                  { "Column 1": 4, "Column 2": 5, "Column 3": 5 }
+                ],
+                "columns": [{ "name": "Column 1" }, { "name": "Column 2" }, { "name": "Column 3" }],
+                "choices": [1, 2, 3, 4, 5],
+                "confirmDelete": true
+              }
+            ]
+          }
+        ]
+      });
+
+      const confirmDelete = Selector(".sv-popup--confirm-delete .sv-popup__container");
+      await t.click(".sd-matrixdynamic__remove-btn");
+      await resetFocusToBody();
+      await takeElementScreenshot("matrixdynamic-delete-confirm-dialog.png", confirmDelete, t, comparer);
+      await t.click(Selector("span").withText("Cancel"));
+
+      await t.resizeWindow(375, 667);
+      await t.click(".sd-matrixdynamic__remove-btn");
+      await resetFocusToBody();
+      await takeElementScreenshot("matrixdynamic-delete-confirm-dialog-mobile.png", confirmDelete, t, comparer);
+    });
+  });
+
   test("Check matrixdropdown with showInMultipleColumns", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1280, 1100);