Error: HTMLInputElement.handleChangeRef.current

[maweo-mathis]

Hello,

I have a custom Input component which I wanna use with react-hook-form to validate a form.
But get get the following Error when I leave a Input field or when I try to submit the empty form.
How can I get react-hook-form to validate my form correctly?

Versions:

"react-hook-form": "^6.15.4",
"yup": "^0.32.9"
"@hookform/resolvers": "^2.6.1",

Form:

import { Input } from 'src/components/Base'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const schema = yup.object().shape({
  firstname: yup
    .string()
    .required("First name is a required field"),
  lastname: yup
    .string()
    .required("Last name is a required field")
})

export default const MyForm = () => {
  
  const [data, setData] = useState({})

  const {
    register,
    handleSubmit,
    formState: { errors }
    } = useForm({
      defaultValues: { firstname: data.firstname, lastname: data.lastname},
      mode: "onBlur",
      resolver: yupResolver(schema)
    })
  }

  const onSubmit = (data) => {
    setData(data)
    console.log(data)
  }
return (
  <form onSubmit={handleSubmit(onSumbit))>
    <Input type="text" name="firstname" label="Vorname" register={register} error={!!errors.firstname ? errors.firstname : null} />
    <Input type="text" name="firstname" label="Vorname" register={register} error={!!errors.firstname ? errors.firstname : null} />
  </form>
)

Custom Input component:

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import * as styles from './styles.module.scss'

const Input = ({
  as: Component = 'input',
  className,
  labelClassName,
  errorClassName,
  type,
  color,
  label,
  error,
  success,
  required,
  ...props
}) => {
  const [value, setValue] = useState('')

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  const buttonClasses = classNames({
    [styles.input]: true,
    [styles.error]: !!error,
    [styles.success]: !!success,
    [styles.primary]: color === 'primary',
    [styles.secondary]: color === 'secondary',
    [styles.checkbox]: type === 'checkbox',
    [className]: !!className,
  })

  const labelClasses = classNames({
    [styles.label]: true,
    [labelClassName]: !!labelClassName,
  })

  const errorClasses = classNames({
    [styles.errorMessage]: true,
    [errorClassName]: !!errorClassName,
  })

  return (
    <>
      {!!label && (
        <label className={labelClasses} htmlFor="">
          {label}
          {required && <span> *</span>}
        </label>
      )}
      <Component
        className={buttonClasses}
        type={type}
        value={value}
        onChange={handleChange}
        required={required}
        {...props}
      />
      {!!error && <p className={errorClasses}>{error}</p>}
    </>
  )
}

Input.propTypes = {
  as: PropTypes.elementType,
  className: PropTypes.string,
  labelClassName: PropTypes.string,
  errorClassName: PropTypes.string,
  type: PropTypes.string,
  color: PropTypes.string,
  label: PropTypes.string,
  error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
}

Input.defaultProps = {
  as: 'input',
  className: '',
  labelClassName: '',
  errorClassName: '',
  type: 'text',
  color: '',
  label: '',
  error: '',
  disabled: false,
}

export default Input

[bluebill1049]

you are using the latest resolver which was made for v7, you want to downgrade to v1