Can't create form inside Modal

[victorcarvalhosp]

Hi team, first of all thank you very much for this great library!

I'm facing an issue with the Modal component right now, I want to add a form inside of it - but this is not possible as I get this error as soon as I add a form to it:

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>.

This is my code:

<Dialog backdrop={false}>
            <Button
              size="sm"
              color="ghost"
              shape="circle"
              className="absolute right-2 top-2"
            >
              x
            </Button>

            <Modal.Header className="font-bold">Hello!</Modal.Header>
            <Modal.Body>
              <form onSubmit={() => handleSubmit(onSubmit)} id="form1">
                <input defaultValue="test" {...register("example")} />
                <br />

                {/* include validation with required or other standard HTML validation rules */}
                <input
                  defaultValue="test 2"
                  {...register("exampleRequired", { required: true })}
                />
                {/* errors will return when field validation fails  */}
                {errors.exampleRequired && <span>This field is required</span>}
                <Button onClick={(e) => e.preventDefault()} type="submit">
                  Confirm button
                </Button>
              </form>
            </Modal.Body>
          </Dialog>

Tried moving it to inside Modal.Actions and the same issue happen. The problem seems to be related to this line: https://github.com/daisyui/react-daisyui/blob/main/src/Modal/Modal.tsx#L46 given that all the children components are being added inside a form already.

Does someone know a workaround for this? I think it would be great to have a working example like this on storybook too.

Taking a look into the daisy-ui documentation for the modal I can see that the modal content is outside the form - and just the close button is inside the form - in this case I think we should change the Modal component and replace the <form> with a <div> - please let me know if that makes sense and then I can open a PR with this change.

[mathisschmidt]

Hi, in my project I used a Modal.Legacy beaucause it not use form inside so it works.

[benjitrosch]

Fixed with @victorcarvalhosp thanks for the PR!