Checkbox not firing onChange

[maciejmyslinski]

Are you submitting a bug report or a feature request?

It's a bug although I'm not sure if it's caused by react-final-form.

What is the current behavior?

In some specific cases, checkbox does not fire onChange handler function on the first click. This will work fine:

const Input = props => <input {...props} />;

const Checkbox = ({ children, ...restProps }) => (
  <label>
    <Input type="checkbox" {...restProps} />
    {children}
  </label>
);

// then inside a Form
<Field
  name="good"
  render={({ input }) => (
    <Checkbox {...input}>It works as expected</Checkbox>
  )}
  type="checkbox"
/>

This will cause a bug:

const Checkbox = ({ children, ...restProps }) => {
  const Input = props => <input {...props} />;

  return (
    <label>
      <Input type="checkbox" {...restProps} />
      {children}
    </label>
  );
);

// then inside a Form
<Field
  name="bad"
  render={({ input }) => (
    <Checkbox {...input}>
      It is <b>not working on first click</b>.
    </Checkbox>
  )}
  type="checkbox"
/>

What is the expected behavior?

onChange handler should be fired.

Sandbox Link

https://codesandbox.io/s/k5y0znj02v

What's your environment?

package	version
React Final Form	1.1.1
Final Form	1.2.1
OS	macOS Sierra (10.12.6)
browser	Chrome 62 (note: the bug doesn't appear in Firefox nor Safari)

Other information

[erikras]

This is because, in the latter example, you are creating a new Input component on every render of checkbox, which is being rendered with React.createElement() by using it in JSX. It has to do with how React replaces the DOM element, rather than just updating the existing one. This would happen in React no matter how you were keeping your form state. Ergo, it's not a problem with this library, but simply a pitfall of the way React works. If you did this with a text input, it would lose focus on the first keypress due to the rerender.

Great reporting, though! 👍

[maciejmyslinski]

Thank you @erikras for such quick response and for such great library! 👍

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.