storybookjs/storybook

[Bug]: Submit in Svelte project using sveltekit-superforms is not working

Open

#26,206 opened on Feb 27, 2024

View on GitHub
 (18 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
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.

Contributor guide