Grommet: Since 2.11.0, CheckBox toggles on click regardless of checked prop

[blakehilliard]

CheckBox no longer appears to be a controlled component.

Expected Behavior

If you control the checked prop on a CheckBox with a state variable, that alone should determine whether it is checked or not.

Actual Behavior

Clicking a CheckBox will toggle it regardless of what you pass to the checked prop.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-uncontrolled-checkbox-28rq4

Steps to Reproduce

Open the above codepen. Click the checkbox. You'll see that it already toggles, even though we still set the checked prop to false.

If you change the codepen to use Grommet 2.10.0, it works as expected.

Your Environment

• Grommet version: 2.11.2
• Browser Name and version: Chrome 79.0.3945.130 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10, desktop

[ShimiSun]

Thanks for reporting.
Might be related to this PR https://github.com/grommet/grommet/pull/3681.

[neokeld]

Maybe it is related : https://codesandbox.io/s/grommet-2-11-tristatecheckbox-t7owc
I have made this example to show what seems to be a bug on the indeterminate state of a checkbox.
If you click 3 times on the checkbox, you will see an error in the console and the checkbox will be white instead of having the styling of the indeterminate state.

[ShimiSun]

@blakehilliard & @neokeld both of the issues were fixed and you can have early access to it by pointing your grommet version to https://github.com/grommet/grommet/tarball/stable on your package.json.

We will have an official release soon.