I have ran into this bug, where I press the Login button, but nothing happens. In browser it works perfectly, but has some issues with capacitorJS. I have tried adding onClick function right on the button, removing Formik functionality, placing something before the try - catch. However, when using with Formik, validation actually works, it tells that the inputs can't be empty and checks email format.
This is the UI part
<form autoComplete="on" onSubmit={handleSubmit}>
<BrandTextField
name={'email'}
onChange={handleChange}
value={values.email}
placeholder={t('common:emailPlaceholder.exampleEmail')}
type={'email'}
label={t('common:email')}
className='mb-3'
error={Boolean(touched.email) && Boolean(errors.email)}
fullWidth
/>
<div>
<BrandTextField
name={'password'}
type={'password'}
onChange={handleChange}
value={values.password}
placeholder={t('common:password')}
label={t('common:password')}
className='mb-3'
error={Boolean(touched.password) && Boolean(errors.password)}
fullWidth
/>
<div
className="login-forgot-password"
onClick={() => history.push('/forgot-password')}
>
{t('signIn.signInScreen.forgotPassword')}
</div>
</div>
<div className="login-submit">
<Button type="submit" size={'auto'}>
{t('common:signIn')}
</Button>
</div>
</form>
And here is the useFormik
const {
values,
handleChange,
errors,
touched,
handleSubmit,
} = useFormik<CredentialsPayload>({
initialValues,
validationSchema,
onSubmit: async (values, { setErrors }) => {
toast.error('submit');
try {
await dispatch(actions.signIn(values));
} catch (err) {
if (err.message) {
toast.error(err.message);
}
setErrors(err.errors ?? {});
}
},
});
The issue was with the way I handled submit, It should be written onClick of button