Ionic/React - How to get value from input item when it is auto-filled by the browser?

Question

I'm making an Ionic React app and am using Firebase to authenticate my user. One issue I'm facing is that on login/registration pages, if the user's username(email) or password is autofilled, that input item's onChange event doesn't get triggered, and the user's information won't get saved to my component's state. Is there a better way that I can accomplish this without being completely hacky?

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  async function login() {
    const res = await loginUser(username, password);
    if(!res) {
      toast('There was an error logging in.') 
    }else {
      toast('You are logged in!');
    }
  }


...

            <IonItem>
              <IonLabel position="stacked">
                Email <IonText color="danger">*</IonText>
              </IonLabel>
              <IonInput
                required
                type="email"
                onIonChange={(e: any) => setUsername(e.target.value)}
              ></IonInput>
            </IonItem>
            <IonItem>
              <IonLabel position="stacked">
                Password <IonText color="danger">*</IonText>
              </IonLabel>
              <IonInput
                required
                type="password"
                value={password}
                onIonChange={(e: any) => setPassword(e.target.value)}
              ></IonInput>
            </IonItem>
          </IonList>
          <div className="ion-padding">
            <IonButton
              expand="block"
              onClick={login}
              class="ion-no-margin"
            >
              Login
            </IonButton>
          </div>
      </IonContent>
    </IonPage>

Foeman

Answer 1

Did you find a solution to your problem?

I had the same issue and worked around it by using the onIonInput event instead.

onIonInput={(e: any) => setPassword(e.target.value)}

Yezd