Skip to content

Conversation

@soundproofboot
Copy link
Contributor

Issue number: resolves #29562


What is the current behavior?

When an input with a password toggle is given disabled or readonly, hiding the password toggle causes a layout shift as it shrinks the height of the input component.

What is the new behavior?

  • Password toggle is given visibility: hidden instead of removing it from the DOM with display: none so it retains it's space but is still hidden and still removed from the accessibility tree.

Does this introduce a breaking change?

  • Yes
  • No

Other information

This solution was suggested by @piotr-cz in the bug report.

@soundproofboot soundproofboot requested a review from a team as a code owner July 7, 2025 18:40
@vercel
Copy link

vercel bot commented Jul 7, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 9, 2025 8:43pm

@brandyscarney brandyscarney changed the title fix(input): change how password toggle is hidden fix(input): prevent layout shift when hiding password toggle Jul 9, 2025
@brandyscarney brandyscarney enabled auto-merge July 9, 2025 20:43
@brandyscarney
Copy link
Member

Looks good! Thank you! 🙂

@brandyscarney brandyscarney added this pull request to the merge queue Jul 9, 2025
Merged via the queue into ionic-team:main with commit f1defba Jul 9, 2025
52 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: ion-input-password-toggle causes layout shift when ion-input has disabled or readonly property

2 participants