Long Press Context Menu Issue with Dropdown Component

[bug-breeder]

Hello everyone,

I’m working on a 2FA authentication web app using Next.js and NextUI. I have a component called OTPCard that displays OTP codes. When the user long-presses (on mobile) or right-clicks (on desktop) an OTP card, a context menu should appear with options to show the QR code, edit, or delete the OTP.

Problem

On mobile devices, when I long-press to open the context menu and then tap an option (e.g., Show QR or Edit), sometimes, the option doesn’t trigger. I think it might be related to how the long-press and touch events are handled.

Here's the link to the OtpCard component: otp-card.tsx

And here's the video demonstrating the error: video

What I've Tried

• Adding a slight delay before opening the context menu to prevent immediate triggering.
• Using stopPropagation.

Links

GitHub Repository: GitHub Repo
Deployed Vercel App: link

[bug-breeder]

Please help me!!