Keep model settings changes out of the page's form
The modal renders in a portal at the end of the document, outside the Models page's form, so twui's Form found no form element on a change there and threw building FormData. The fields get a form of their own, nested inside the page's, to give it something to read and to keep Enter from submitting the page.
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Modal from "@moduletrace/twui/elements/Modal";
|
import Modal from "@moduletrace/twui/elements/Modal";
|
||||||
|
import Form from "@moduletrace/twui/form/Form";
|
||||||
import H2 from "@moduletrace/twui/layout/H2";
|
import H2 from "@moduletrace/twui/layout/H2";
|
||||||
import Span from "@moduletrace/twui/layout/Span";
|
import Span from "@moduletrace/twui/layout/Span";
|
||||||
import Stack from "@moduletrace/twui/layout/Stack";
|
import Stack from "@moduletrace/twui/layout/Stack";
|
||||||
@@ -101,7 +102,12 @@ export default function HarnessParameterModal({
|
|||||||
and repeatable.
|
and repeatable.
|
||||||
</Span>
|
</Span>
|
||||||
</Stack>
|
</Stack>
|
||||||
<Stack className="w-full gap-4! items-stretch">
|
{/*
|
||||||
|
A form of its own: twui's Form reads the closest form on change,
|
||||||
|
so inside the page's form (this renders in a portal) a change
|
||||||
|
here would blow up reading the modal's wrapper.
|
||||||
|
*/}
|
||||||
|
<Form className="w-full gap-4! items-stretch" onSubmit={(e) => e.preventDefault()}>
|
||||||
<HarnessParameterFields
|
<HarnessParameterFields
|
||||||
id={id}
|
id={id}
|
||||||
harness={harness}
|
harness={harness}
|
||||||
@@ -109,7 +115,7 @@ export default function HarnessParameterModal({
|
|||||||
params={params}
|
params={params}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Form>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user