Closed as not planned
Description
Description
I noticed that events or stores like submitting
are not updated if the form is rendered inside another component, such as a sheet or dialog.
<script lang="ts">
const form = superForm(data, {validators: zodClient(locationOrderSchema)});
const { form: formData, enhance, submitting } = form;
</script>
<Sheet.Root>
<Sheet.Trigger>ClickMe</Sheet.Trigger>
<Sheet.Content>
<Sheet.Header>
Header
</Sheet.Header>
<form method="post" use:enhance action="?/saveLocation">
<Form.Field {form} name="location">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Nueva ubicación:</Form.Label>
<Select.Root type="single" bind:value={$formData.location} name={props.name}>
<Select.Trigger {...props}
>{$formData.location
? $formData.location
: 'Seleccione una ubicación'}</Select.Trigger
>
<Select.Content>
{#each locations as l}
<Select.Item value={l}>{l}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
{/snippet}
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Button text="Guardar ubicación" icon={IconType.EDIT} action={ButtonAction.SUBMIT}
></Button>
</form>
</Sheet.Content>
</Sheet.Root>
Everything works as expected if I take the form outside of the sheet component.
Is there a way too make it work?