react icon indicating copy to clipboard operation
react copied to clipboard

Bug: Quickly selecting checkboxes on iOS doesn't work correctly

Open danielddb opened this issue 1 year ago • 0 comments

React version: 18.0.0

Steps To Reproduce

  1. Open https://4txdx2.csb.app/ in a device running iOS in Safari / Chrome.
  2. Quickly tap one checkbox followed by another one.
  3. Notice that if you quickly select one checkbox followed by another one, it checks / unchecks the previous checkbox you were on on.

Link to code example: https://codesandbox.io/p/sandbox/boring-burnell-4txdx2

The current behavior

There appears to be some sort of race condition where tapping on a controlled / uncontrolled <input type="checkbox"> quickly after tapping another checkbox updates the original checkbox you tapped rather than the checkbox that was just tapped. It appears to be a timing issue - if you wait long enough between taps, the events are fired on the correct elements.

This does seem to be a React issue because if you run this basic HTML/CSS example https://xqn2zj.csb.app/ (live code example https://codesandbox.io/p/sandbox/checkbox-example-html-xqn2zj) and follow the reproduction steps then you don't hit this race condition.

The expected behavior

The checkbox state should reflect the checked state of the checkbox you tapped, not the previous checkbox you tapped.

danielddb avatar Oct 15 '24 09:10 danielddb