Bug: On mobile devices, clicking checkboxes in a list of 2 or more checkboxes will toggle the wrong one.

[sambehrens]

When rendering a list of checkboxes, clicking checkboxes in sequence will sometimes trigger the wrong checkbox to be toggled. Behavior seems to be that sometimes previously clicked checkbox gets toggled instead of currently clicked checkbox.

This issue only seems to be on mobile or possibly touch devices. Could possibly be an issue with touch event listener. This issue seems to have been introduced in React 17.0.0 as version 16.14.0 seems to work correctly.

Reopening of: #27475

React version: 18.3.1

Steps To Reproduce

View app on a mobile device (I'm using iPhone 15 Pro with Safari, Orion, and Firefox) Click multiple checkboxes in sequence Expect that correct checkbox always gets toggled, however often the previous checkbox gets toggled.

Link to code example:

Sandbox with working behavior (React 16.14.0) https://codesandbox.io/s/react-16-checkboxes-xzzl96 https://xzzl96.csb.app/

Sandbox with broken behavior (React 18.2.0) https://codesandbox.io/s/react-18-checkboxes-zrhpfp https://zrhpfp.csb.app/

The current behavior

When clicking multiple checkboxes in sequence, often the wrong checkboxes gets toggled.

The expected behavior

The correct checkbox should be toggled when clicked.

[danielddb]

Hey @sambehrens, I came across this issue too the other day.

This seems to partially fix it when you zoom in a little bit on your mobile device https://github.com/facebook/react/issues/31260#issuecomment-2416032673 (see forked sandbox https://codesandbox.io/p/sandbox/react-18-checkboxes-forked-32hfqh too).

It still doesn't quite work though when you're completely zoomed out.

[sambehrens]

Hey @sambehrens, I came across this issue too the other day.

This seems to partially fix it when you zoom in a little bit on your mobile device #31260 (comment) (see forked sandbox https://codesandbox.io/p/sandbox/react-18-checkboxes-forked-32hfqh too).

It still doesn't quite work though when you're completely zoomed out.

Yeah, I have tried your fix and it does indeed fix it when you are zoomed in but unfortunately not when you are zoomed out like you said.

[HAWKZ4]

Hi @sambehrens,

I tested this on my Samsung mobile across multiple browsers, and I noticed something that might explain what you're observing.

It seems this behavior could be related to the precision of touch input on mobile devices, especially when the screen is zoomed out or when interacting with closely spaced elements. Depending on where the touch occurs, it might register as targeting a nearby checkbox rather than the intended one.

Additionally, some browsers show options to select between overlapping elements if the touch point is ambiguous.

From reviewing the code, it appears that clicking on the label/title linked to the checkbox (via the id) could also be a factor, as this might inadvertently toggle the checkbox when the title is touched instead.

I hope this helps clarify the situation.

[djizco]

Hi @sambehrens,

I tested this on my Samsung mobile across multiple browsers, and I noticed something that might explain what you're observing.

It seems this behavior could be related to the precision of touch input on mobile devices, especially when the screen is zoomed out or when interacting with closely spaced elements. Depending on where the touch occurs, it might register as targeting a nearby checkbox rather than the intended one.

Additionally, some browsers show options to select between overlapping elements if the touch point is ambiguous.

From reviewing the code, it appears that clicking on the label/title linked to the checkbox (via the id) could also be a factor, as this might inadvertently toggle the checkbox when the title is touched instead.

I hope this helps clarify the situation.

That is all good, but it doesn't explain why it works perfectly fine on React versions <17.0.0. To me this tells me there is some issue directly related to how react is rendering the elements in React 17 and later.

[mizdra]

This seems to be a duplicate of https://github.com/facebook/react/issues/19841. And this problem does not seem to be a React bug, but a Webkit bug. It is tracked at https://bugs.webkit.org/show_bug.cgi?id=216681.

Firefox and Chromium on iOS use Webkit internally. Therefore, they are affected by the Webkit bug. This is why the problem is reproduced in all iOS browsers.

• https://firefox-source-docs.mozilla.org/overview/ios.html
• https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!