Nested Form (I know its bad, but..)

[mweel1]

So I have the following...

   <FormProvider {...methods}>

<SelectCompany/>

   <FormProvider {...methods}>

The Select Company component opens a sidebar where you can select a company, or add a new one. Once that is done it show what company is selected cleanly in the form.

The problem is that I have two nested Form Providers, and my SelectCompany is submitting the parent form.
I know your not suppose to nest form, and technically I am not because the child form is only temporary if your adding a new company and then its exhausted.

I am bit at a loss of what to do, I want to have one clean component that I can just insert and have all the functionality I need just like its any other input control.

One thing I thought was building a Context Provider and having multiple controls scattered (one in the form, and one outside of the form), but I really would like to have 1 control if possible so I don't have to wire up a bunch of state.

Anyone have any ideas around this?

[bluebill1049]

Does the <SelectCompany/> has to be a form? maybe just a state-controlled component and pass the selected value down as prop?

[benmarg]

Try the following:

 <form
     onSubmit={form.handleSubmit(onSubmit)}
     id="unit-skill-dialog"
  >

<Button type="submit" form="unit-skill-dialog">
  Submit
</Button>

Add the id and form attributes to the

and button on the inner RHF instance, and this will prevent the event from propagating to the parent, no need to use e.stopPropogation