How can I trigger validation with a ref?

Description

I have a Material UI dialog with a Wizard/Funnel with multiple forms inside. Since Material Design demands the button to be on the bottom part of the dialog, there is no submit button inside any form.

const Page() {
  const formRef = useRef<HTMLFormElement>();

  const onSubmit = (payload: FirstFormValues | SecondFormValues | ThirdFormValues) => {
    // code to save each form state
  }

  const onNextStep = () => {
    formRef.current!.submit();  // <-- this submit does not trigger validation, but a redirect

    setCurrentStep(currentStep => currentStep + 1);
  }

  return (
    <Dialog>
      <DialogContent>
        <Funnel ref={formRef} currentStep={currentStep} />
      </DialogContent>  
      <DialogActions>
        <Button onClick={handleNextStep}>Next</Button>
      </DialogActions>
    </Dialog>
  );
}


const Funnel = forwardRef<HTMLFormElement, Props>(({ onSubmit }, formRef) => {
  return (
    <> 
      {step === 0 && <FirstForm ref={formRef} onSubmit={onSubmit} />}
      {step === 1 && <SecondForm ref={formRef} onSubmit={onSubmit} />}
      {step === 2 && <ThirdForm ref={formRef} onSubmit={onSubmit} />}
    </>
  );
})

const FirstForm = forwardRef<HTMLFormElement, Props>(({ onSubmit }, formRef) => {
  const { handleSubmit, register } = useForm()

  return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
      <input type="submit" value="Just to test" />
    </form>
  );
})

Clicking on the “Just to test” button correctly triggers the validation on the form. However, the call formRef.current!.submit() causes a page refresh.

What’s the right way of doing this?

[christopher-francisco]

@bluebill1049 no problem, you always help me so the least I can do is make it easier for you. I’m REALLY grateful man 😃 love this library

[christopher-francisco]

@bluebill1049 Sure thing. what does CSB stand for?