bug: ion-input-password-toggle causes UI misalignment with clear-input icon
Opened this issue · 0 comments
braincomb commented
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
Currently, with clear-input it shifts the icon to the left, so the alignment looks weird:
Expected Behavior
Ideally, we want something like this:
Oddly enough when trying to apply CSS positioning, it makes the icon non-interactable, i.e. can't click on it anymore.
Steps to Reproduce
<ion-input aria-label="Password" type="password" placeholder="Password" clear-input>
<ion-icon slot="start" :icon="lockClosedOutline" aria-hidden="true"></ion-icon>
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
Code Reproduction URL
N/A
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/home/braincomb/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.3.3
Capacitor:
Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v22.11.0 (/home/braincomb/.nvm/versions/node/v22.11.0/bin/node)
npm : 10.9.0
OS : Linux 5.15
Additional Information
No response