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 |
|--------|-----|

|![prev](https://github.com/user-attachments/assets/c1c54710-e534-44bf-9ef9-6ddc990996d9)
|
![now](https://github.com/user-attachments/assets/b10b8696-e0bb-4e99-9d3d-fe5a92d384e8)
|

## 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>
This commit is contained in:
Marta Carlos
2025-03-21 16:11:56 +00:00
committed by GitHub
parent 40932d7b2d
commit a7233c296a
34 changed files with 55 additions and 3 deletions

View File

@@ -65,8 +65,6 @@
// Cursor should match the native input when hovering over the target area.
cursor: text;
z-index: 1;
}
::slotted([slot="start"]),

View File

@@ -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`));
});
});
});

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB