From 1c00f3ca1c68fd54e9fb0e863c41ab386be4d36a Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Mon, 7 Jul 2025 13:05:34 -0500 Subject: [PATCH 1/3] fix(input): change how password toggle is hidden --- core/src/components/input/input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 57d438eb2d9..2161cc3dfb5 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -618,5 +618,5 @@ */ :host([disabled]) ::slotted(ion-input-password-toggle), :host([readonly]) ::slotted(ion-input-password-toggle) { - display: none; + visibility: hidden; } From 6878f74b1861a5b1ca8a141016b32abf5a567205 Mon Sep 17 00:00:00 2001 From: soundproofboot Date: Wed, 9 Jul 2025 15:22:56 -0500 Subject: [PATCH 2/3] test(input): add test to check input height --- .../components/input/test/states/input.e2e.ts | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts index eb51f760966..2d4c7a1eab8 100644 --- a/core/src/components/input/test/states/input.e2e.ts +++ b/core/src/components/input/test/states/input.e2e.ts @@ -26,5 +26,66 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const input = page.locator('ion-input'); await expect(input).toHaveScreenshot(screenshot(`input-disabled`)); }); + + test('should maintain consistent height when password toggle is hidden on disabled input', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29562', + }); + await page.setContent( + ` + + + + `, + config + ); + + const input = page.locator('ion-input'); + + // Get the height when input is enabled + const enabledHeight = await input.boundingBox().then(box => box?.height); + + // Disable the input + await input.evaluate(el => el.setAttribute('disabled', 'true')); + await page.waitForChanges(); + + // Get the height when input is disabled + const disabledHeight = await input.boundingBox().then(box => box?.height); + + // Verify heights are the same + expect(enabledHeight).toBe(disabledHeight); + }); + + + test('should maintain consistent height when password toggle is hidden on readonly input', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29562', + }); + await page.setContent( + ` + + + + `, + config + ); + + const input = page.locator('ion-input'); + + // Get the height when input is enabled + const enabledHeight = await input.boundingBox().then(box => box?.height); + + // Make the input readonly + await input.evaluate(el => el.setAttribute('readonly', 'true')); + await page.waitForChanges(); + + // Get the height when input is readonly + const readonlyHeight = await input.boundingBox().then(box => box?.height); + + // Verify heights are the same + expect(enabledHeight).toBe(readonlyHeight); + }); }); }); From da55dcc1a7c3d42925bb0a9afec212db35685538 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 9 Jul 2025 16:42:16 -0400 Subject: [PATCH 3/3] style: lint --- .../components/input/test/states/input.e2e.ts | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts index 2d4c7a1eab8..33d33d91cf0 100644 --- a/core/src/components/input/test/states/input.e2e.ts +++ b/core/src/components/input/test/states/input.e2e.ts @@ -27,7 +27,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { await expect(input).toHaveScreenshot(screenshot(`input-disabled`)); }); - test('should maintain consistent height when password toggle is hidden on disabled input', async ({ page }, testInfo) => { + test('should maintain consistent height when password toggle is hidden on disabled input', async ({ + page, + }, testInfo) => { testInfo.annotations.push({ type: 'issue', description: 'https://github.com/ionic-team/ionic-framework/issues/29562', @@ -44,21 +46,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const input = page.locator('ion-input'); // Get the height when input is enabled - const enabledHeight = await input.boundingBox().then(box => box?.height); + const enabledHeight = await input.boundingBox().then((box) => box?.height); // Disable the input - await input.evaluate(el => el.setAttribute('disabled', 'true')); + await input.evaluate((el) => el.setAttribute('disabled', 'true')); await page.waitForChanges(); // Get the height when input is disabled - const disabledHeight = await input.boundingBox().then(box => box?.height); + const disabledHeight = await input.boundingBox().then((box) => box?.height); // Verify heights are the same expect(enabledHeight).toBe(disabledHeight); }); - - test('should maintain consistent height when password toggle is hidden on readonly input', async ({ page }, testInfo) => { + test('should maintain consistent height when password toggle is hidden on readonly input', async ({ + page, + }, testInfo) => { testInfo.annotations.push({ type: 'issue', description: 'https://github.com/ionic-team/ionic-framework/issues/29562', @@ -75,14 +78,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const input = page.locator('ion-input'); // Get the height when input is enabled - const enabledHeight = await input.boundingBox().then(box => box?.height); + const enabledHeight = await input.boundingBox().then((box) => box?.height); // Make the input readonly - await input.evaluate(el => el.setAttribute('readonly', 'true')); + await input.evaluate((el) => el.setAttribute('readonly', 'true')); await page.waitForChanges(); // Get the height when input is readonly - const readonlyHeight = await input.boundingBox().then(box => box?.height); + const readonlyHeight = await input.boundingBox().then((box) => box?.height); // Verify heights are the same expect(enabledHeight).toBe(readonlyHeight);