fix(input): remove z-index target-area for ionic theme (#30261)
Issue number: internal --------- ## What is the current behavior? Currently, operations associated with gestures aren’t working, for the ionic theme: - can’t select the text using double tap - can’t longpress - can’t move the cursor to any positions ## What is the new behavior? - It's now possible to select text using double tap, long press and move the cursor to different positions - Adds new tests for double clicks | Before | Now | |--------|-----| | |  | ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Notes Currently, the double click text selection is not working (the text isn't selected) on the automated tests for: - ionic theme, on firefox and safari - md/ios themes, on firefox as manual tests do not have this problem, we'll be skipping these tests for now and come back to them at a later date --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
@@ -65,8 +65,6 @@
|
||||
|
||||
// Cursor should match the native input when hovering over the target area.
|
||||
cursor: text;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::slotted([slot="start"]),
|
||||
|
||||
@@ -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(
|
||||
`
|
||||
<ion-input
|
||||
label="Label"
|
||||
clear-input="true"
|
||||
value="Text"
|
||||
></ion-input>
|
||||
`,
|
||||
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(
|
||||
`
|
||||
<ion-input
|
||||
label="Label"
|
||||
label-placement="stacked"
|
||||
clear-input="true"
|
||||
value="Text"
|
||||
></ion-input>
|
||||
`,
|
||||
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(
|
||||
`
|
||||
<ion-input
|
||||
label="Label"
|
||||
label-placement="stacked"
|
||||
clear-input="true"
|
||||
value="Text"
|
||||
></ion-input>
|
||||
`,
|
||||
config
|
||||
);
|
||||
const input = page.locator('ion-input');
|
||||
const nativeInput = input.locator('input');
|
||||
await nativeInput.dblclick();
|
||||
await expect(input).toHaveScreenshot(screenshot(`input-dbclick`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |