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

[piotr-cz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

The ion-input-password-toggle component causes layout shifts when it's parent ion-input has a disabled or readonly property

Affect is particularly visible when ion-input has labelPlacement="stacked"

Expected Behavior

Layout should not shift

Steps to Reproduce

1. Go to Code Reproduction URL
2. Click on Submit
3. Observe layout shift

Code Reproduction URL

https://stackblitz.com/edit/waav8e?file=src%2Fmain.tsx

Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v18.18.2
npm : 9.8.1
OS : Windows 10

Additional Information

Issue is caused because the ion-input-password-toggle component is larger than ion-input

The display: none css property may be replaced by visibility: hidden instead here:

ionic-framework/core/src/components/input/input.scss

Lines 609 to 616 in f238b42

	/**
	* The input password toggle component should be hidden when the input is readonly/disabled
	* because it is not possible to edit a password.
	*/
	:host([disabled]) ::slotted(ion-input-password-toggle),
	:host([readonly]) ::slotted(ion-input-password-toggle) {
	display: none;
	}

[ErikOnBike]

Bummer....I accidentally assigned the wrong issue number. Closed the PR.