bug: I need a double click to display a string in console.log using Ionic + React

[ujangaripin24]

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

v7.x

Current Behavior

n my case I need to double click on the "Login" button to display the Email and Password

import React, { useEffect } from 'react';
import { IonButton, IonCardContent, IonContent, IonIcon, IonInput, IonItem, IonList, IonLoading, IonPage, useIonRouter } from '@ionic/react';
import { mailOpenOutline, lockClosedOutline } from 'ionicons/icons';

const LoginPage: React.FC = () => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const navigation = useIonRouter();

  useEffect(() => {}, [email, password])

  const handlerLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log("set", email, "this email");
    console.log("set", password, "this password");
  }

  const signUp = () => {
    navigation.push('/register')
  }

  return (
    <IonPage>
      <IonContent className="ion-padding">
        <IonCardContent>
          <IonList>
            <form onSubmit={handlerLogin}>
              <IonItem>
                <IonInput
                  label='Email'
                  labelPlacement='stacked'
                  placeholder='example@email.com'
                  type='email'
                  clearInput={true}
                  onIonChange={(e: any) => setEmail(e.target.value)}
                >
                  <IonIcon slot='start' icon={mailOpenOutline} />
                </IonInput>
              </IonItem>
              <IonItem>
                <IonInput
                  className='ion-margin-top'
                  label='Password'
                  labelPlacement='stacked'
                  placeholder='*******'
                  type='password'
                  onIonChange={(e:any) => setPassword(e.target.value)}
                >
                  <IonIcon slot='start' icon={lockClosedOutline} />
                </IonInput>
              </IonItem>
              <IonButton type='submit' expand='full' shape='round' fill='outline'>
                Login
              </IonButton>
            </form>
            <IonButton color={'danger'} expand='full' shape='round' fill='outline' onClick={() => signUp()}>
              Daftar
            </IonButton>
            <IonLoading isOpen={loading} message={'Harap Tunggu'} />
          </IonList>
        </IonCardContent>
      </IonContent>
    </IonPage>
  );
};

export default LoginPage;

when I click once on the "Login" button on the console.log it displays an image like this and when I double click the "Login" button it will display console.log like this

Expected Behavior

I want to display the Email and Password on the console.log with just one click of the "Login" button, how do I do it? is there something wrong with my code?

Steps to Reproduce

1. clone repo https://github.com/ujangaripin24/ionic-react-firebase-chating
2. make sure you using Node 20.xx.x
3. make sure you using Ionic 7.x.x
4. Ionic cap run android -l --livereload --external
5. wait util Project running on SDK
6. open inspect element with chrome using 'chrome://inspect' on Adress Bar
7. enter Email and Password and click once on the button
8. and click the button again a second time

Code Reproduction URL

https://github.com/ujangaripin24/ionic-react-firebase-chating

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.7.3

Capacitor:

Capacitor CLI : 5.7.0 @capacitor/android : 5.7.0 @capacitor/core : 5.7.0 @capacitor/ios : 5.7.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.10.0 (/home/pratiwi24/.nvm/versions/node/v20.10.0/bin/node) npm : 10.2.3 OS : Linux 6.5

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[mapsandapps]

Hi, I cannot access the repo you've provided. Please provide a new link or make that one available. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!