Successive clicks on label are throttling OnChange listener

final-form / react-final-form-listeners

A collection of components to listen to 🏁 React Final Form fields

MIT License

93 stars 20 forks source link

Successive clicks on label are throttling OnChange listener #5

Open bluSCALE4 opened 6 years ago

bluSCALE4 commented 6 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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.

finalform

maciejmyslinski commented 5 years ago

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

erikras commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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?