문제인식

react-hook-form을 사용하여 폼을 구성할때, 폼이 컴포넌트로 구분되어 있다면 밖에서 폼의 submit을 해야할 경우가 있다.
컴포넌트바깥에서 폼의 ref로 접근해서 submit을 시도하면 submit 이벤트가 preventDefault 되지 않아서 다른 페이지로 이동되었다.

const form = formRef.current;
if (form) {
  form.submit(); // 페이지 이동;;
}

해결방법

form에 submit 이벤트를 디스패치하되, 취소가능과 이벤트버블을 활성화 시켜주면 된다.

const form = formRef.current;
if (form) {
  form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
}

참고

https://github.com/react-hook-form/react-hook-form/issues/566