onSubmit stripped for Forms

Trying to test a button that allows form submissions:

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Button from '../button';

storiesOf('Button', module)
  .add('submit for a form', () => (
    <div className="p4 center">
      <form
        onSubmit={ () => action('form submitted') }>
        <Button type="submit">Submit</Button>
      </form>
    </div>
  ));

It seems that onSubmit gets stripped when it loads in React Storybook. I’ve tried different combinations: wrapping it with a div, making it the root component, using a custom Form component, etc. In all cases the onSubmit is stripped out. Any idea what I’m doing wrong? Or are forms not supported by React Storybook?

[de-monkeyz]

You need to pass in just the call to action() not a function that calls it:

<form onSubmit={action('form submitted')}>

This doesn’t prevent the default action on the form though, so the iFrame will reload. Not sure how you could handle this outside storing the created action:

const submitAction = action('form submitted');
storiesOf('Button', module)
  .add('submit for a form', () => (
    <div className="p4 center">
      <form
        onSubmit={ e => { e.preventDefault(); submitAction(e); }}>
        <Button type="submit">Submit</Button>
      </form>
    </div>
  ));

[shilman]

@njcaballero all the 6.x changes should be backwards compatible, i.e. action(x)(e) should still work. if you’re getting a warning about package dependencies you can just install addon-actions as a dev dependency to your project. it won’t affect essentials.

if you want to use the “new way” of doing things where onX is automatically filled in via args, it would look something like this (react example)

const withPreventDefault = (action) => e => {
  e.preventDefault();
  return action(e);
};

const Template = ({ onClick, ...rest }) => (
  <MyComponent onClick={withPreventDefault(onClick)} {...rest} />
)