Search code examples
reactjsreduxformikcapacitor

Submit button doesn't work in Capacitor App


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 ?? {});
      }
    },
  });

Solution

  • The issue was with the way I handled submit, It should be written onClick of button