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 Modal from "@moduletrace/twui/elements/Modal";
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import H2 from "@moduletrace/twui/layout/H2";
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
@@ -101,7 +102,12 @@ export default function HarnessParameterModal({
|
||||
and repeatable.
|
||||
</Span>
|
||||
</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
|
||||
id={id}
|
||||
harness={harness}
|
||||
@@ -109,7 +115,7 @@ export default function HarnessParameterModal({
|
||||
params={params}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Stack>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user