Ionic React: Password autofill does not put the password correctly

So I have this code:

  const onChange = (about: string, value: string) => {
    setViewModel({
      email: about === 'email' ? value : viewModel.email,
      password: about === 'password' ? value : viewModel.password,
    })
  }

...

return (
<form onSubmit={login}>
    <h1 className="ion-text-center">Owner Login</h1>
        <IonCard>
            <div className='input-wrapper border-bottom'>
                <IonInput autocomplete="email" required onIonChange={e => onChange('email', e.detail.value!)} value={viewModel.email} type="email" placeholder="Email" />
            </div>
            <div className='input-wrapper'>
                <IonInput autocomplete="current-password" required onIonChange={e => onChange('password', e.detail.value!)} value={viewModel.password} type="password" placeholder="Password" />
            </div>
        </IonCard>
        <div className="ion-text-center">
            <IonButton fill="solid" type="submit">Login</IonButton>
        </div>
    </form>
)

My code works fine if I just type the email and password manually. If I use autofill from my Android phone (Huawei Nova 5T), somehow the submitted password are wrong. It passes the required attribute check from the form submit, but the value submitted is null / empty. I got Error 400 from my server, this indicates that the required parameter passing is wrong, one of the field is null (when its required).

If I click autofill and backspace the last character from the password then type the last character again, it works.

For example if password is mypassword:

  • Auto fill the form
  • delete d from mypassword
  • type d at the end of mypasswor
  • the password becomes mypassword again

This works. The password passed to the server is correct.

Can anyone tell my if this is a bug? Should I change my code?

2 Likes