Description
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
v7.x
Current Behavior
When IonInput is given a value of type="password" in @ionic/react, the input will clear text unexpectedly when certain keys are pressed. This is most notable when using a keyboard to navigate between controls. This behavior is not observed with the native input element with type set to password or the default IonInput.
Expected Behavior
IonInputs should be accessible via keyboard. Pressing modifier keys (e.g., shift, command) should not clear a password input (unless combined with another key, e.g., shift + p).
Steps to Reproduce
- Create an
IonInputwithtype="password" - Enter a value (either via keyboard or via password manager autofill)
- Tab to the next focusable element
- Tab back to the password input
- Tab to the next focusable element
- IonInput with
type="password"is empty
Code Reproduction URL
https://stackblitz.com/edit/vxete3-yk4b3w?file=src%2Fmain.tsx
Ionic Info
Via StackBlitz:
Ionic:
Ionic CLI : 5.4.16
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v18.18.0
npm : 9.4.2
OS : Linux 5.0
Additional Information
First noticed on a project using @ionic/react: 7.0.4 and validated on latest available release in StackBlitz (i.e., "@ionic/react": "^7.5.7" and "@ionic/react-router": "^7.5.7").