Checkbox: doesn't toggle its state, when using only the keyboard

[MaxCilauro]

Steps

1. Create a toggle function with a setState that uses a function as updater.
2. Bind the function to a Checkbox onChange
3. Use tab and space bar to select and check the checkbox

Expected Result

Checkbox should call toggle and toggle the check state.

Actual Result

Toggle function is called twice, so the check state is not being toggled.

Version

0.78.3

Testcase

https://codesandbox.io/s/23wm962zkn

Thank you!

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[GCrispino]

Your code works as expected when using passing an object to setState instead of a callback. Like this:

toggle = () =>
    this.setState({
      checked: !this.state.checked
    });

Instead of:

toggle = () => (
    this.setState(prevState => ({
      checked: !prevState.checked
    }))

Check it out here

My limited knowledge of React won't let me be sure of it, but this still looks like a bug, because it should work, I think. I'd be willing to fix it, I'd like to just wait for a maintainer to confirm it and/or tell what could be causing it. Or when I have some free time I'll dig into the source and try to find it out.

[hubertguillemain]

Typically the prop "checked" should be used to toggle your Checkbox from another component.
By setting the state when onChange is fired, you actually toggle twice in a row, which ends up back to checked=false

You can see by replacing your toggle function with this:

` toggle = () => (

this.setState(prevState => ({
 
  checked: !prevState.checked
}), console.log("Your function has been triggered"))

)`

[GCrispino]

@hubertguillemain that makes sense but why does this happen only when hitting the space bar? This does not happen when clicking. Also, why does this not happen when changing the setState code like I mention in my previous comment?

[levithomason]

Fixed in #2748, however, tests need added/updated there before merge. Help on that much appreciated! Just PR your tests against my branch fix/checkbox-spacebar instead of master.

[stale]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[MaxCilauro]

I will give a look at the branch and see if I can help (and also understand what was causing this bug). Thank you!