Theo's Typesafe Cult•3mo ago

ReactHookForm propagating nested forms despite e.stopPropagation

So I have a RHF inside a RHF, I know this isn't best practice, but this SO thread suggests it's possible: https://github.com/react-hook-form/react-hook-form/issues/1005#issuecomment-626050339 Code looks like:

  function onSubmit(
    values: z.infer<typeof formSchema>,
    e: BaseSyntheticEvent | undefined
  ) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("here")
    }
    addUnitSkill(values);
  }

<Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Add</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            //
            //All the inputs and stuff removed
            //
            <DialogFooter className="flex ">
              <DialogClose asChild>
                <Button type="button" variant="secondary">
                  Close
                </Button>
              </DialogClose>
              <Button type="submit">Submit</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>

  function onSubmit(
    values: z.infer<typeof formSchema>,
    e: BaseSyntheticEvent | undefined
  ) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("here")
    }
    addUnitSkill(values);
  }

<Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Add</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            //
            //All the inputs and stuff removed
            //
            <DialogFooter className="flex ">
              <DialogClose asChild>
                <Button type="button" variant="secondary">
                  Close
                </Button>
              </DialogClose>
              <Button type="submit">Submit</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>

This is nested inside another RHF. Despite the console.log("here") printing, the event is still being propagated to the parent form when I don't want it to be. Another approached I tried was removing the "submit" type from the button, and just having the button itself call the onSubmit, still didn't work :BabyRage:

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

ReactHookForm propagating nested forms despite e.stopPropagation