RadioButton/Checkbox: onChange event is called for each click

[mikejav]

Describe the bug

The nature of the radio button's onChange event is that they should call the onChange event only when its state is actually changed.

Steps to reproduce:

1. render RadioButton component with checked prop set to true and add onChange event handler that does something.
2. click on that RadioButton multiple times.

Result:

The onChange event is called even if the state was not changed.

Expected behavior:

When the RadioButton is clicked multiple times and if its state is "checked" - it should not call onChange.

Reproducer

No response

PrimeReact version

7.2.1

React version

17.x

Language

TypeScript

Build / Runtime

Webpack

Browser(s)

Chrome 103.0.5060.134

[melloware]

Confirmed with Reproducer: https://codesandbox.io/s/primereact-test-forked-hcj1zl?file=/src/index.js

Same issue for RadioButton and Checkbox.

[harrybradshaw]

I am surprised that this behaviour was considered a bug for the Checkbox component.
Because your component allows the state to be externally managed (checked, onChange props), it seems a poor assumption to make that the click successfully causes the state to update. If the state update fails or is overridden, you are then left with a checkbox that is unusable without refreshing the page, as you cannot attempt the action again.

[melloware]

I have a better fix if you don't mind testing it for your scenario?

[harrybradshaw]

Happy to test, is there a PR/branch that I can check this out on?

[melloware]

Yep PR here: #3223

[harrybradshaw]

Sad to say does not work, would suggest that the issue lies in having two sources of truth, both the inputRef.current.checked and the props.checked.

Checkbox.js:34
inputRef.current.checked = !checked;

Can make the component out of sync with the external state that is being passed into props.checked.
The useEffect already will keep these in sync and the docs don't seem to suggest that it should be able to run without a checked prop, so perhaps can just remove this?

[melloware]

can you put together a code sandbox showing the issue using this? https://codesandbox.io/s/q2u1lr that way i can see what the issue is?

[harrybradshaw]

Have done: https://codesandbox.io/s/lucid-visvesvaraya-kcc8qt?file=/src/demo/CheckboxDemo.js
With a PR that fixes this, in addition to some other ref related issues I found with clicking between labels and on the radiobuttons themselves: #3226

[mikejav]

I checked on the latest PrimeReact version and looks like the bug is still reproducible for clicking on radio-button. Clicking on its label works as expected.

https://codesandbox.io/s/radio-bux-7m27iq-7m27iq

[melloware]

@mikejav please open a new ticket.