storybookjs/storybook
View on GitHub[Bug]: Submit in Svelte project using sveltekit-superforms is not working
Open
#26,206 opened on Feb 27, 2024
bugcompatibility with other toolshelp wantedsev:S3sveltesveltekit
Repository metrics
- Stars
- (89,909 stars)
- PR merge metrics
- (Avg merge 7d 22h) (184 merged PRs in 30d)
Description
Describe the bug
When I click the submit button, nothing happens if my form is using use:enhance from sveltekit-superforms.
A form without use:enhance seems to work great.
https://github.com/storybookjs/storybook/assets/9967422/beda05ef-f2a3-402c-8cd0-c71b0e684ce6
Button.svelte
<script lang="ts">
import './button.css';
import { defaults, superForm } from 'sveltekit-superforms';
import { userSchema } from './schema';
import { zod } from 'sveltekit-superforms/adapters';
const formData = defaults({name: 'some name'}, zod(userSchema));
const spForm = superForm(formData, {
onSubmit: (data) => {
console.log('Form submitted', data);
}
})
const {enhance} = spForm;
let formElement: HTMLFormElement;
</script>
<form id="form-1" use:enhance method="POST">
<input type="text" name="name" value="Some text"/>
<button>Submit form with use:enhance</button> <!-- Nothing seems to happen -->
</form>
<form id="form-2" method="POST" style="margin-top: 20px;" bind:this={formElement}>
<input type="text" name="name" value="Some text"/>
<button>Submit form, no enhance</button> <!-- can submit -->
</form>
<button type="button" on:click={() => formElement.requestSubmit()}>Submit form, no enhance also works</button>
To Reproduce
Clone the repo, npm run storybook and visit the Button.svelte story.
System
System:
OS: macOS 14.3.1
CPU: (10) arm64 Apple M1 Max
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
npm: 10.2.5 - ~/.nvm/versions/node/v18.17.1/bin/npm <----- active
pnpm: 8.12.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
Browsers:
Chrome: 122.0.6261.69
Safari: 17.3.1
npmPackages:
@storybook/addon-essentials: ^7.6.17 => 7.6.17
@storybook/addon-interactions: ^7.6.17 => 7.6.17
@storybook/addon-links: ^7.6.17 => 7.6.17
@storybook/blocks: ^7.6.17 => 7.6.17
@storybook/svelte: ^7.6.17 => 7.6.17
@storybook/sveltekit: ^7.6.17 => 7.6.17
@storybook/test: ^7.6.17 => 7.6.17
eslint-plugin-storybook: ^0.8.0 => 0.8.0
storybook: ^7.6.17 => 7.6.17
### Additional context
My end-goal is to mock submit requests from sveltekit-superforms with the mock service worker plugin, and test my different states of form components.