Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xiscosc opened this issue Dec 8, 2024 · 1 comment
Open

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

xiscosc opened this issue Dec 8, 2024 · 1 comment
Labels
bug Something isn't working question Further information is requested

Comments

@xiscosc
Copy link

xiscosc commented Dec 8, 2024

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?

@xiscosc xiscosc added the bug Something isn't working label Dec 8, 2024
@ciscoheat
Copy link
Owner

I'm not sure how it works with Formsnap, so to figure it out I'd need a MRE without it. Here's a template you can use: https://sveltelab.dev/github.com/ciscoheat/superforms-examples/tree/zod

@ciscoheat ciscoheat added the question Further information is requested label Dec 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants