Work for #7191: fix mobile multipletext with inputType 'date'

surveyjs · Oct 20, 2023 · b57b4f6 · b57b4f6
1 parent 95ecc0f
commit b57b4f6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 0 deletions.
diff --git a/src/defaultV2-theme/defaultV2.m600.scss b/src/defaultV2-theme/defaultV2.m600.scss
@@ -62,6 +62,7 @@
 
   .sd-multipletext__item {
     flex-basis: 0;
+    min-width: 0;
 
     .sd-input {
       padding: 0;
@@ -84,7 +85,12 @@
 
     .sd-multipletext__item {
       flex-basis: auto;
+      min-width: auto;
       width: 100%;
+
+      .sd-input {
+        width: 100%;
+      }
     }
   }
 }

diff --git a/...ressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-empty.png b/...ressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-empty.png
diff --git a/...ressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-focus.png b/...ressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-focus.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date.png
diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts
@@ -434,6 +434,43 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("responsiveness-multipletext.png", Selector(".sd-question"), t, comparer);
     });
   });
+  test("Check multipletext with inputType 'date' on small screen", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(600, 1080);
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        questions: [
+          {
+            type: "multipletext",
+            name: "q1",
+            title: "Personal Information",
+            colCount: 2,
+            items: [
+              {
+                name: "item1",
+                inputType: "date",
+                title: "Depature Date "
+              },
+              {
+                name: "item2",
+                inputType: "date",
+                title: "Arrival Date "
+              },
+            ]
+          },
+        ]
+      });
+      const inputSelector = Selector(".sd-input");
+      await takeElementScreenshot("responsiveness-multipletext-date-empty.png", Selector(".sd-question"), t, comparer);
+      await t.click(inputSelector.nth(0));
+      await takeElementScreenshot("responsiveness-multipletext-date-focus.png", Selector(".sd-question"), t, comparer);
+      await t.typeText(inputSelector.nth(1), "2004-01-12")
+        .click(inputSelector.nth(2))
+        .typeText(inputSelector.nth(3), "2004-02-12");
+      await resetFocusToBody();
+      await takeElementScreenshot("responsiveness-multipletext-date.png", Selector(".sd-question"), t, comparer);
+    });
+  });
   test("Check multicolumn checkbox question on small screen", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(600, 1080);