events on input like `onChange`, `onBlur` get called twice

Hey @jxnblk, awesome library!

When using the <Input /> component, event handlers always get called twice. This is because you capture all events into rootProps and after that you apply them to two <Base />components

  const {
    rounded,
    backgroundColor,
    theme,
    inverted,
    // event handlers go into this variable
    ...rootProps
  } = props

// later
<Base
  // applies onClick, onBlur etc.
  {...rootProps}
>
  // applies onClick, onBlur etc. again
  <Base
    {...props}
    type='input'
  >
  </Base>
</Base>

My best advice is to switch to something like a rootProps prop on Input and then delegate the rest of the props to the Input component. I can create a pull request if you agree with that.

const Input = ({
  label,
  name,
  type,
  message,
  hideLabel,
  children,
  rootProps,
  ...props
}, { rebass }) => {
  const {
    rounded,
    backgroundColor,
    theme,
    inverted
  } = props

  return (
    <Base
      {...rootProps}
      >

      <Base
        {...props}
      />
        {message && <Text small children={message} />}
    </Base>
  )
}

Another option would be to filter out all events and delegate them to the second <Base />. This would require a list of events though.

EDIT: Same problem exists for <Select />

[jxnblk]

Thanks! This probably also affects Textarea, Checkbox, and Radio. I tend to think certain props should just be explicitly passed to the form control, but let me think about possible solutions for this.

If you want to take a stab at a PR (maybe just start with one component), I’d be happy to take a look at what you’re suggesting.

[theseyi]

This probably affect most rebass elements with DOM events since most inherit from Base.