select gets tap, when below Ionic Popup's Ok Button

[1aishwaryasharma]

Issue -
If a popup's 'OK' button is right above/over an underlying select option, then after selecting the 'OK' button of the popup, the select also gets called.

Sample Code - https://github.com/Dbms/Ionic_Sample_2

Steps to reproduce issue -

1. Click the button 'Do Something!' on the top left. You get an ionic popup.
2. Click the OK button on the popup, the underlying select option also gets clicked.

Note -

1. Use iPhone 3.5 inch simulator, in which case the OK button comes properly over a select option.
2. If instead of select, there is a button below, then the button click does not occur (which should be the behaviour)

[perrygovier]

Thank @dbms. It looks like the the e.preventDefault() in tapClickGateKeeper isn't working as expected. Firing an e.target.blur() immediately after it mostly fixed the problem, but the select window starts to slide up for a fraction of a second. I'll keep investigating.

[perrygovier]

A little more research, tapTouchStart is where we need an e.preventDefault() to properly stop the focus from ever happening. Currently it's fired on text inputs because ionic.tap.isLabelWithTextInput(e.target) returns true in that event. I believe we need a method to prevent these second touch/click events that fire in the same location a split second later. Calling preventDefault on select elements in that event should suffice for this case though.

[adamdbradley]

What's happening is that Ionic is simulating the click for the button so that it happens immediately after touchend (to remove the 300ms delay). However, iOS is also firing off the actual click 300ms later. By the time iOS fires off its click, the popup has gone away and what is showing is the select element in the same location.

Preventing any second clicks in the same location is what Ionic originally used to remove the 300ms, but it proved to cause too many issues, and it caused too large of delay between clicks when clicking fast in the same location.

This issue is the same which actionsheet and modals have because those services also remove themselves from the view when its done, but the native click 300ms later causes issues when clicking the content underneath the actionsheet/modal/popup.

We should verify if its only a select element issue, or if it also tries to focus in on text inputs, or tries clicking buttons in the same location. In the end the best method to prevent this is to not remove the backdrop immediately, but rather 400ms later, so that its pointer-events:none can block any upcoming clicks which the browser may send later.

Also, be sure to update your code to use the latest Ionic version.

[1aishwaryasharma]

@perrygovier Thanks for taking this up!!
@adamdbradley If I remember correctly, I checked with the Beta 6 of Ionic also, the issue is there.

Just to correct myself in the Problem Statement, it is not specifically 'OK' button of the PopUp, it happens on the 'Cancel' also - if the underlying select option overlaps with the Cancel button..

[perrygovier]

Ok, some more investigation.

Text inputs will also gain focus, but buttons do not. I get a clickPrevent BUTTON in my logs when the button is behind the button that closes the modal.

Since we're creating our own click handlers, what if we added an extra blocking parameter to click events? So most buttons would not get this, but when our click event triggers an animation that could reveal a new input element, we provide a param that blocks click events for 400ms?

[1aishwaryasharma]

@adamdbradley I have changed some code in the ionic.bundle.js as you had suggested - to increase the time after which the backdrop is removed

function release() {
    if ( (--backdropHolds) === 0 ) {
      el.removeClass('active');
      setTimeout(function() {
        !backdropHolds && el.removeClass('visible');
      }, 400);
    }
  }

This seems to correct the issue for now, at least on the tests on the iPhone Simulator.
Is this correct, or were you implying something else ?

[marioese]

@dbms, @adamdbradley This issues occurs with the actionsheet as well. And though increasing the time from 100 to 400 after removal of the backdrop seem to work correctly for the popup, it does not for the actionsheet. Any more thought on this?

And is this issue not similar to: #1536 ?

[1aishwaryasharma]

@marioese Definitely seems similar to #1536. The Ionic team would be better to tell you the solution for actionsheet though.

[adamdbradley]

This should be fixed from: 20d567f

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.