Button click requires double click or long-press on mobile

user_4237080 0
Viewed 1465

I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.

I have replicated my problem in this demo.

If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.

Why is this not working properly on mobile? How can I get the button to work when I tap it?

I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.

This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.

EDIT: Solved. See my answer.

react-leaflet reactjs javascript
1 Answers

Turns out it works if I fix the stacking of elements. I had nested my navbar component inside the MapContainer, but this was making things wonky mobile-side. I moved my component outside the MapContainer, and things worked.

I still don't understand why it went wonky mobile-side and in iOS only, but this problem at least is solvable.

Fixed example is here.

My map token has been removed, so you can use your own to substitute, but it is not necessary to have the map showing to see the problem/solution.

user_42370800
Related