Stopping Click event from passing through to input below

I have a collapsible overlay that has some z-index greater than the page below it. The problem is, when the collapse button is above a form element, say an input, the click on the collapse button falls through to the form element causing the keyboard to pop up and the page to shift. Is there a way to prevent this? Here’s what I’m trying right now.


The css for the overlay is the same as the .bar from ionic. Here are the relevant lines.

display: flex;
position: absolute;
z-index: 10;

And then my toggle class changes the height around to 30px for collapsed and 200px for expanded.

Oddly, this behavior doesn’t happen on my chrome for my desktop. Just on my mobile device. For what it’s worth, I am currently testing on a Moto X running Android 4.4.2.

Does anybody have a suggestion for how I might stop the apparent event propagation? Or another idea what might be causing this?


Can you throw this into a codepen?

While reproducing the error to paste here it struck me that the only button on my overlay that was causing this was the collapse button. Essentially, what was happening was I was tapping collapse, the overlay was moving down and because the overlay was moving faster than I, a lowly human, could remove my finger from the screen, another tap event was being registered on the input below. Adding data-tap-disabled=“true” to the collapse button fixed my error.