Skip to content

Move the metadata form inside of the creation/edition modal

Erwan Rouchet requested to merge fix-metadata-form into master

Closes #1447 (closed)

src/components/Element/Metadata/Metadata.vue is the only component that contains a <Modal> inside of a <form>. Every other component that contains both a <Modal> and a <form> puts the <form> inside of the <Modal>.

As part of an attempt to make keyboard shortcuts at least sometimes work in modals, !1410 (merged) made the <form> wrap around the entire <Modal> so that both pressing Enter and clicking the submit button would trigger the form's submit event. This relies on the normal concept of HTML where things are always nested within each other. The <form> cannot just be inside of the modal's body because the submit button is in the modal footer, separate from the body, so that button would no longer work.

!1688 (merged) changes this by teleporting the contents of the modal elsewhere, which resolves many CSS issues but introduces different issues. The contents of the modal are now in the <body>, so they are no longer in the <form>. Pressing Enter or clicking the submit button wants to trigger a submit event, but there is no more form to attach it to.

!1688 (merged) does not include this modal in its diff, as nothing needed to be changed for it to look like it works, but it did break it.

I moved the form back in the modal body, making the Enter key work on all the inputs again, and added the form attribute on the buttons to force them to be linked to the form, even though they are outside of it.

Merge request reports