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

[piotr-cz]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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:

https://github.com/ionic-team/ionic-framework/blob/f238b4258ca5152c2fa13d76deebd5738fd33bda/core/src/components/input/input.scss#L609-L616

[ErikOnBike]

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