Skip to content

Enhance not working if form is rendered by another component #524

Closed as not planned
@xiscosc

Description

@xiscosc

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingquestionFurther information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions