React-hook-form doesn't work with Controller and Reactstrap

Question

While updating a project from React v17 to React v18, I encountered an issue with form submission. I had recently updated the Controller component from react-hook-form, replacing the as={} prop with render={} to render my inputs (which come from Reactstrap). Despite having a Material-UI (MUI) Button with the type set to “submit,” clicking the button didn’t trigger the onSubmit function, preventing the form from being submitted.

Can find the code below:

const onSubmit = async (values) => {
  console.log(values)
}

<form onSubmit={handleSubmit(onSubmit)}>
  <FormGroup className="has-wrapper">
    <Controller
      render={() => (
        <Input
          type="text"
          className="has-input input-lg"
          placeholder="Username"
          disabled={askToken}
        />
      )}
      name="username"
      control={control}
      rules={{ required: true }}
      defaultValue=""
    />
    <span className="has-icon">
      <i className="ti-user" />
    </span>
  </FormGroup>
  <FormGroup className="has-wrapper">
    <Controller
      render={() => (
        <Input
          type="Password"
          className="has-input input-lg"
          placeholder="Pass"
          disabled={askToken}
        />
      )}
      name="password"
      control={control}
      rules={{ required: true }}
      defaultValue=""
    />
    <span className="has-icon">
      <i className="ti-lock" />
    </span>
  </FormGroup>
  <FormGroup className="has-wrapper">
    <div className="row">
      <div className="w-75 col-12 col-md-4">
        <Controller
          render={() => (
            <Input
              type="text"
              className="has-input input-lg"
              placeholder="Security Code"
              disabled={askToken}
            />
          )}
          name="captcha"
          control={control}
          rules={{ required: true }}
          defaultValue=""
        />
      </div>
      <div className="w-25 col-12 col-md-6">{getImage()}</div>
    </div>
  </FormGroup>
  {askToken ? (
    <React.Fragment>
      <FormGroup className="mb-15">
        <Button
          variant="contained"
          className={`${
            token ? "btn-success" : "btn-warning"
          } btn-block w-100`}
          size="large"
          onClick={() => openUsbDevices()}
        >
          {token
            ? "Token condition text"
            : "Token condition text"}
        </Button>
      </FormGroup>
    </React.Fragment>
  ) : (
    <React.Fragment>
      <FormGroup className="mb-15">
        <Button
          type="submit"
          color="primary"
          className="btn-block w-100"
          variant="contained"
          size="large"
        >
          ٍEnter
        </Button>
      </FormGroup>

      <FormGroup className="mb-15">
        <Button
          variant="contained"
          className="btn-info btn-block w-100"
          size="large"
          onClick={onExternalLogin}
        >
          Does not matter
        </Button>
      </FormGroup>
    </React.Fragment>
  )}
</form>

While attempting to implement the code, I used the onClick prop to trigger the onSubmit function. However, it seems that this approach is not the correct way to achieve the desired behavior. Imports and the libraries versions are up to date.

Updated Code

<Button
    onClick={onSubmit}
    color="primary"
    className="btn-block w-100"
    variant="contained"
    size="large"
>
    Enter
</Button>

Answer 1

It seems like if we that Reactstrap components are not compatible with Controller components from react hook form. The most proper solution can be to change the Input components with simple input tags from HTML. As I did in the following:

<Controller
  render={({field}) => (
    <input
      {...field}
      type="text"
      className="has-input input-lg"
      placeholder="Username"
      disabled={askToken}
    />
  )}
  name="username"
  control={control}
  rules={{ required: true }}
  defaultValue=""
/>

Despite the Controller library, adding that field property can be helpful in submitting your form.