Click event bubbles through overlay

[Redmega]

If there is a button or component with onClick under the overlay, tapping on it with the drawer open will both close the drawer & fire the click event. This causes unexpected behavior, especially if the click event involves a link or a window.location change.

Updates: This happens only on mobile chrome (default for most android phones) and in the chrome browser when emulating a device using the developer tools.

[Redmega]

I'm not able to replicate in the example project. I need to do more testing in my RL project.

[Redmega]

No longer able to replicate in my work project. I'll close it for now.

[Redmega]

Unexpected behavior occurs in the "device emulator" view of the chrome dev tools. Probably doesn't exist elsewhere. I need to do testing on an actual mobile device to make sure it doesn't happen in the wild.

[Redmega]

I can confirm this happens on mobile Chrome as well.

[Redmega]

This does not happen on mobile safari.

[krishnaff]

Any pointers on how to fix this please?
Mobile Safari works fine. Issue is seen in Chrome and Android browsers.

[FDiskas]

if i directly remove thous styles then it works

[Redmega]

Tentatively fixed by #51, but that PR introduces some hard coded styling to the body, which might interfere with the users' styling. I'm not satisfied by that approach. I'm not sure if a better alternative exists, though, so I may merge it regardless. Interested in hearing peoples thoughts on this.

[breeny]

I think adding blocking on body scroll when the drawer is open is a good solution - in my implementation I had to manually add this as I had a list of dynamic content in both the drawer and the body in the background, so had cases where both would respond to scroll events depending on the length of lists etc.