diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 6fbba1553ba..2c08bc588bf 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -65,8 +65,6 @@ // Cursor should match the native input when hovering over the target area. cursor: text; - - z-index: 1; } ::slotted([slot="start"]), diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts index 78f0561c577..d1d3e3bb093 100644 --- a/core/src/components/input/test/basic/input.e2e.ts +++ b/core/src/components/input/test/basic/input.e2e.ts @@ -29,7 +29,6 @@ configs().forEach(({ title, screenshot, config }) => { await expect(input).toHaveScreenshot(screenshot(`input-with-placeholder`)); }); }); - test.describe('input with clear button', () => { test('should not have visual regressions with default label', async ({ page }) => { await page.setContent( @@ -63,6 +62,43 @@ configs().forEach(({ title, screenshot, config }) => { await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button-stacked`)); }); }); + test.describe('input click behaviors', () => { + test('should not have visual regressions when user double clicks', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + const input = page.locator('ion-input'); + const nativeInput = input.locator('input'); + await nativeInput.dblclick(); + // Validates the display of an input with a clear button. + await expect(input).toHaveScreenshot(screenshot(`input-dbclick`)); + }); + test('should not have visual regressions with stacked label when user double clicks', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + const input = page.locator('ion-input'); + const nativeInput = input.locator('input'); + await nativeInput.dblclick(); + // Validates the display of an input with a clear button. + await expect(input).toHaveScreenshot(screenshot(`input-dbclick-stacked`)); + }); + }); }); }); @@ -185,6 +221,24 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { const container = page.locator('#container'); await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`)); }); + + test('should not have visual regressions when user double clicks', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + const input = page.locator('ion-input'); + const nativeInput = input.locator('input'); + await nativeInput.dblclick(); + await expect(input).toHaveScreenshot(screenshot(`input-dbclick`)); + }); }); }); diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0615dc1d0db Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bdf34196200 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..55eba598fa0 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f6ad13cc204 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..153d317ff9e Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d2bdbfe06f6 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dbe91794f9e Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b11670f3808 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8c845053e2f Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..215e7ef54ed Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1b05d06e091 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a8d760b36a7 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..57f1da53450 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a20415749c0 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..16e8203d015 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..626f8c56e52 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0ef25801f7a Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..bc2625994f8 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..87ad82f6011 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d230a8837dd Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..57212677813 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..171dde9d3ab Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2b23456247d Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..50a06acd94b Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5bd1c814646 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1a67e211b54 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..90f9cb5a39b Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e14affb5a2d Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..98bedf8d815 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7763dab8759 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-dbclick-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4933a67d35a..e8fd596ccb5 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png index 199030c3d22..eb6895f3be6 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ