[BUG] - DatePicker allows click through day on mobile

[blaudroid]

NextUI Version

2.2.10

Describe the bug

I have implemented a DatePicker input on my form. When the DatePicker is being opened and it overlaps a NextUI Button, upon selecting a day that is exactly over the button it allows the click to go through, thus selecting the day and also clicking on the button beneath the calendar.

The NextUI has been installed as mentioned in the docs in a Remix React App.

Remix version: 2.8.1 React DOM: 18.2.0 NextUI: 2.2.10

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Make sure you are on mobile viewport.
2. Create a form
3. Implement DatePicker
4. Make sure that when the calendar is opened it overlays a button
5. Click the day that overlaps the button
6. The day is being selected and the button triggered.

Expected behavior

As user i expect the calendar to not have side effects on mobile upon selecting a day within the date picker.

Screenshots or Videos

Operating System Version

macOS Sonoma 14.4.1

Browser

Chrome 124.0.6367.62 (Official Build) (arm64)

[linear[bot]]

ENG-696 [BUG] - DatePicker allows click through day on mobile

[U29]

It is a forced method, but I found one solution.

First, define a state to disable touch events.

const [isPointerBlocking, setIsPointerBlocking] = useState(false);

Next, apply the following style to the lower component, which would be affected by touch events

className={
            isPointerBlocking ? "pointer-events-none" : "pointer-events-auto"
          }

Finally, in the DatePicker component's onChange handler, we temporarily disable the previous pointer event and then immediately enable it.

<DatePicker
  onChange={(date) => {
            setIsPointerBlocking(true);
            setTimeout(() => {
              setIsPointerBlocking(false);
            }, 100);
    }}

This solves the problem of clicking on the bottom component along with the calendar.

[mighty6ft5max]

This is a terrible solution. I'm facing the same issue with the calendar. I tried applying classes like "pointer-events-none" etc. but that doesn't work. Using onClick={(e) => e.stopPropogation()} doesn't seem to be a solution either.

[scotto-kpd]

Any updates here?

[MHBahrampour]

This is really important bug, please prioritize it🙏

[wingkwong]

@MHBahrampour please provide a minimal reproducible environment. thanks.

[MHBahrampour]

@wingkwong It seems this issue has been resolved at some point. I created a new project and no longer see the problem. App: https://datepicker-bug.vercel.app/ Code: https://github.com/MHBahrampour/datepicker-bug

However, I experienced this issue in version 2.4.6. You can still see it in action here: App: https://shittil.netlify.app/groups/akvsf/expenses/create

I hadn't had time to revisit that project and didn't realize it had been fixed.

[wingkwong]

Thanks for confirmation.