Successive clicks on label are throttling OnChange listener

[bluSCALE4]

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

When a user clicks on a checkbox label, the event on the input is throttled causing the listening field stale to become stale.

What is the expected behavior?

It should toggle quickly like clicking on the input directly does.

Sandbox Link

https://codesandbox.io/s/zk2kmrwppm

Check both boys and girls then successively click the boys/girls label.

What's your environment?

OSX, Node v8.11.1, npm 5.6.0

    "final-form": "^4.10.0",
    "react-final-form": "^3.6.5",
    "react-final-form-listeners": "^1.0.1",

Other information

This example is being used for another issue.

[maciejmyslinski]

@bluSCALE4 I'm not sure if I get you right.
The only issue in this example I see is that label Both in line 62 is not connected to the input element (@erikras I believe it's something only you can fix).
@bluSCALE4 could you please elaborate on the issue you've found?

[bluSCALE4]

@maciejmyslinski if you click on the label for girl or boy in quick succession, you'll see that both isn't updated as expected. But if you click the label for girl boy slowly, it works as expected.

[maciejmyslinski]

wow, that's strange @bluSCALE4. I'll try to write a test case for it.

[erikras]

I took a look at the test on #10, and while I haven't yet figured a way to make it pass, I've been playing with this "both or several" checkboxes pattern. Check out this sandbox. I think that maybe using calculated fields might be a more powerful way to accomplish this sort of logic. Thoughts?

[maciejmyslinski]

@erikras my thoughts on this is that's the wrong paradigm to use in the first place. React is all about being declarative and render according to the state.

[erikras]

What you're doing, though, is not rendering, it's adding some logic to the data flow. The "calculated fields" thing is just listening for changes on a field and updating other fields. Is there another way?