My IonButton event isn't triggering when my keyboard is open

Ionic Framework Ionic React
1

I have a Login page but if someone tries to press the submit button while the keyboard is open it just closes the keyboard but the event isn’t triggered. The event only triggers if you press the button when the keyboard is closed. Can anyone help?

async function fetchData() {
    // function here
}

return return (
        <IonCard>
            <IonLoading isOpen={loading} message={loadMessage} spinner="circles" />
            <IonCardHeader>
                <IonCardTitle>Login</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>
                <IonList inset={false}>
                    <IonItem>
                        <IonCardContent>
                            <IonLabel position="floating">Username</IonLabel>
                            <IonInput type="text" placeholder="Username" onIonChange={(e: any) => setUsername(e.target.value.trim())} required={true} />
                        </IonCardContent>
                    </IonItem>
                    <IonItem>
                        <IonCardContent>
                            <IonLabel position="floating">Password</IonLabel>
                            <IonInput type="password" placeholder="Password" minlength={3} onIonChange={(e: any) => setPassword(e.target.value)} required={true} />
                        </IonCardContent>
                    </IonItem>
                </IonList>

                <IonButton type="submit" fill="outline" onClick={fetchData}>Login</IonButton>
                {
                    showToast && <IonToast
                        position="middle"
                        color="danger"
                        isOpen={showToast}
                        onDidDismiss={() => setShowToast(false)}
                        message={toastMessage}
                        duration={1800}
                    />
                }
            </IonCardContent>
        </IonCard>