Handle custom form components with useImperativeHandle about react-hook-form

No, if the value is not an array still not works. However, I change array with function provided by useState. So it should understand the change.

[bluebill1049]

value is array may be the issue, cause it does shallow compare with value

can you share bit more code or a codesandbox would really help?

[bluebill1049]

oh ok, this is an example which I did for custom input. hopefully, it will help you abit

https://codesandbox.io/s/72j69vnk1x

Thanks. But, my component is not a html form component. It has four inputs and the final value should be sum of all inputs.

[bluebill1049]

Oh ok.

Sounds like your four inputs should be one Component and register as one field, and use setValue to update value once it's finished the calculation.

share your code bit more, see if I can assist :)

this is my custom component:

import React, {
  useState,
  useRef,
  forwardRef,
  useImperativeHandle
} from "react";
import styles from "./splitInput.module.scss";

const SplitInput = forwardRef((props: Props, ref: any) => {
  const [value, setValue] = useState([...Array(props.length)]);
  const elRef = useRef([...Array(props.length)].map(() => React.createRef()));

  useImperativeHandle(
    ref,
    () => {
      return {
        type: "text",
        name: props.name,
        value: value.join("")
      };
    },
    [value]
  );

  const onInputChange = (e, i) => {
    e.persist();
    if (e.target) {
      setValue(value => {
        value[i] = e.target.value;
        return value;
      });
      if (i < props.length - 1 && e.target.value !== "") {
        elRef.current[i + 1].current.focus();
      }

      props.onChange(value.join(""));
    }
  };

  const onKeyDown = (e, i) => {
    e.persist();
    if (i > 0 && e.key === "Backspace") {
      e.preventDefault();
      var input = elRef.current[i].current;

      input.value = "";
      input = elRef.current[i - 1].current;

      input.focus();
    }
  };

  const renderInputs = () => {
    let rows = [];
    for (let i = 0; i < props.length; i++) {
      rows.push(
        <input
          ref={elRef.current[i]}
          key={i}
          type="number"
          autoFocus={i == 0}
          onChange={e => onInputChange(e, i)}
          onKeyDown={e => onKeyDown(e, i)}
          className={styles.verficationCode}
        />
      );
    }
    return rows;
  };
  return <div className={styles.verficationCodeBox}>{renderInputs()}</div>;
});
SplitInput.defaultProps = {
  length: 4
};
export default SplitInput;

[bluebill1049]

import React, {
  useState,
  useRef,
  forwardRef,
  useImperativeHandle,
  useEffect,
} from "react";
import styles from "./splitInput.module.scss";

const SplitInput = forwardRef((props: Props, ref: any) => {
  const [value, setValue] = useState([...Array(props.length)]);
  const elRef = useRef([...Array(props.length)].map(() => React.createRef()));

  useEffect(() => {
    // register a filed in react hook form
    props.regsiter({
      name: 'total'
    })
  }, []);

  useEffect(() => {
    // set field value when value is changing
    props.setValue('total', value.join(""))
  }, [value]);

  const onInputChange = (e, i) => {
    e.persist();
    if (e.target) {
      setValue(value => {
        value[i] = e.target.value;
        return value;
      });
      if (i < props.length - 1 && e.target.value !== "") {
        elRef.current[i + 1].current.focus();
      }

      props.onChange(value.join(""));
    }
  };

  const onKeyDown = (e, i) => {
    e.persist();
    if (i > 0 && e.key === "Backspace") {
      e.preventDefault();
      var input = elRef.current[i].current;

      input.value = "";
      input = elRef.current[i - 1].current;

      input.focus();
    }
  };

  const renderInputs = () => {
    let rows = [];
    for (let i = 0; i < props.length; i++) {
      rows.push(
        <input
          ref={elRef.current[i]}
          key={i}
          type="number"
          autoFocus={i == 0}
          onChange={e => onInputChange(e, i)}
          onKeyDown={e => onKeyDown(e, i)}
          className={styles.verficationCode}
        />
      );
    }
    return rows;
  };
  return <div className={styles.verficationCodeBox}>{renderInputs()}</div>;
});
SplitInput.defaultProps = {
  length: 4
};
export default SplitInput;

what about this?

It registers the field as the methods I did before. But, changing the value does not change the validation errors. And I cannot submit the form.

[bluebill1049]

You can use ‘setError(‘total’)’ to remove the error if value is valid .

It adds an error like this to error list:
phone: {type: undefined, message: undefined, ref: undefined, isManual: true}

I have also another problem. I see an error in console:

index.es.js:364 Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
at findRemovedFieldAndRemoveListener (index.es.js:364)
at index.es.js:738
at MutationObserver. (index.es.js:514)

[bluebill1049]

which version of react-hook-from do you have? 3.7.4 ?

Yes, I have 3.7.4

[bluebill1049]

hmmm I will patch this bug tonight.

Thanks. Great!
The problem with ‘setError(‘total’)’ is that I check it like this:
if (total) {
props.setError("total");
}
To remove required error.

But, when I type a char, the error disappears and with the next char error appears!

[bluebill1049]

and error is : phone: {type: undefined, message: undefined, ref: undefined, isManual: true}?

Yes!

[bluebill1049]

thanks, are you using validationSchema? (sorry many questions, I try to drill down the issue)

Thanks for great support :). No, I am not using validationSchema.
I use it this way:

  useEffect(() => {
    // register a filed in react hook form
    props.register(
      {
        value: "",
        name: "total",
        type: "custom"
      },
      { required: true }
    );
  }, []);

Note: It didn't work without type and value.

[bluebill1049]

no worries :) you only need name, because it's not a real DOM element.

register({ name: 'total' }) will do

[bluebill1049]

I have patched https://github.com/bluebill1049/react-hook-form/releases/tag/3.7.5
let me know if that solved the issue. Thanks 👍

Thanks, The last problem is solved greatly.
Now, there is another error at the console:

index.es.js:333 Uncaught TypeError: ref.removeEventListener is not a function
    at removeAllEventListeners (index.es.js:333)
    at findRemovedFieldAndRemoveListener (index.es.js:365)
    at index.es.js:736
    at MutationObserver.<anonymous> (index.es.js:514)

Is there any way to automatically check for errors on setValue? I mean without setting error manually.

[bluebill1049]

hmmm, are you still using this register with value and type?

try to do manual register with just name.

normally you shouldn't have to do things manually.

patched again with 3.7.8

Looks like everything goes well :) Thank youuu

[bluebill1049]

❤️ can u show me how u register your custom input?

  useEffect(() => {
    // register a filed in react hook form
    props.register(
      {
        name: "total"
      },
      { required: true }
    );
  }, []);

[bluebill1049]

sweet thanks :) happy coding. Are you happy to close the issue?