search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
73.99k stars 4.56k forks source link

[bug]: Fast clicking/taping when ticking checkboxes will return it to its original state #4957

Open mrxelnag opened 1 month ago

mrxelnag commented 1 month ago

Describe the bug

When multiple checkboxes are present on a single page, there is an issue where rapidly clicking a checkbox can cause it to revert to its previous state. This behavior appears to be triggered when a "double-click" (dblclick) browser event is registered. It is really hard to reproduce it on a destop, but on mobile i can reproduce it every time.

The problem has been observed specifically in the Safari browser on iOS devices.

For further reference, please see the related GitHub issue: React Issue #19841.

A demonstration of this behavior can be found in the following video: Video Example

Someho ChakraUI managed to make this issue a thing in a past. https://v2.chakra-ui.com/docs/components/checkbox/usage

Affected component/components

Checkbox

How to reproduce

  1. Have multiple checkboxes on one page (or go to https://ui.shadcn.com/docs/components/checkbox | Form Section)
  2. Try to check/uncheck them quickly.

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/checkbox

Logs

No response

System Info

It works the same in Simulator and on Real Device
iOS: 18.0
Safari for iOS

Before submitting

danielddb commented 3 weeks ago

I've raised this issue on react https://github.com/facebook/react/issues/31260 as I'm noticing this when just using basic controlled / uncontrolled checkboxes.