'react-google-recaptcha not working on Android/iOS

I am getting the onErrored method called right from the page load on Android and iOS.

enter image description here

Works fine on PC/Mac.

Have react-google-recaptcha v2.1.0

Am I doing something wrong?


Setting the ref:

  constructor(props) {
    super(props);
    this.captchaRef = React.createRef();
  }

On error:

  handleCaptchaError = (event) => {
    console.log("handleCaptchaError", { event });
  };

On submit:

  handleSubmit = async (form) => {

    form.preventDefault();

    this.captchaRef.current.reset();

    const token = await this.captchaRef.current.executeAsync();

    const { email, password } = form.target.elements;

    if (this.handleEmail(email.value) && this.handlePassword(password.value)) {
      this.props.dispatch(
        authorize({
          email: email.value,
          password: password.value,
          captcha: token,
        })
      );
    }
  };

The form:

render() {
    return (
      <React.Fragment>
        <Form onSubmit={this.handleSubmit}>
          
          <List>
            <ItemInput>
              <Input
                type="email"
                name="email"
                autoComplete="username"
                onChange={(e) => this.handleEmail(e.target.value)}
              ></Input>
            </ItemInput>
            <ItemInput>
              <Input
                type="password"
                name="password"
                autoComplete="current-password"
                onChange={(e) => this.handlePassword(e.target.value)}
              ></Input>
            </ItemInput>
            <Button>Submit</Button>
          </List>
        </Form>
        <div
          style={{
            position: "absolute",
            visibility: "hidden",
            opacity: "0",
            pointerEvents: "auto",
          }}
        >
          <ReCAPTCHA
            ref={this.captchaRef}
            size="invisible"
            sitekey={global.config.captcha.key}
            data-callback="callback"
            onErrored={(e) => this.handleCaptchaError(e)}
            //onExpired={}
          />
        </div>
      </React.Fragment>
    );
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source