Won't Fix
Last Updated: 31 Jul 2022 07:23 by ADMIN
Created on: 29 Jul 2022 21:11
Category: KendoReact
Type: Bug Report
Checkbox: event.value and event.nativeEvent.target.checked disagree when toggling with keyboard

In the Checkbox onChange callback, event.nativeEvent.target.checked seems to be set differently depending on whether the input was toggled by mouse click or by pressing space.

After clicking on the Checkbox, event.value and event.nativeEvent.target.checked will have the same value, consistent with the Checkbox's new state.

After pressing space with the Checkbox focused, event.value and event.nativeEvent.target.checked will have different values, with event.value containing the Checkbox's new state and event.nativeEvent.target.checked containing the Checkbox's old state.

I would expect event.nativeEvent.target.checked to be set the same way regardless of whether I am toggling the Checkbox with mouse or keyboard.  Furthermore, I would expect event.value and event.nativeEvent.target.checked to always be equal to each other.

I made a code sandbox to demonstrate the bug here: https://codesandbox.io/s/kendo-react-checkbox-bug-26f7ur

1 comment
Konstantin Dikov
Posted on: 31 Jul 2022 07:23

Hi Kyle,

Thank you for reaching out to us.

Due to the way that the Checkbox component is implemented, the behavior that you are observing is expected. When the input element is clicked with the mouse, this triggers the "onChange" event of the input, which is then handled by the Checkbox component to update the value. The sequence of events in this scenario is the following:

  • Input is clicked;
  • Input value is changed;
  • onChange is triggered;
  • Checkbox handled onChange of the input and triggers its own onChange;
  • Both values are the same.

However, when the keyboard is used for toggling the values, the sequence is completely different:

  • Checkbox handles "keydown" event and if the spacebar is pressed, it stops the propagation of the event and calls preventDefault as well (which prevents the input element from changing its value);
  • If the spacebar is pressed, within the keydown handler, the value of the Checkbox is changed programmatically (using setValue(e, !currentVal)). This toggles the value of the Checkbox itself and triggers the onChange event;
  • Only after the value of the Checkbox component is changed (after the onChange event of the Checkbox fires), the input is then rendered with the new value, which is whey the values are different in this scenario.

For consistency, you should use the event.value only.

I am changing the status to "Won`t Fix", but if you provide more information on why this could be a problem and the exact scenario in which you need to compare both values, we might re-consider the status and change it accordingly. 


Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.