bug: Clicking popup can click txtarea behind it if busy

[JonathanAquino]

Type: bug

Platform: ios 7 webview

In #2204 adamdbradley fixed a bug in which if you click an $ionicActionSheet, it clicks any textarea behind where you clicked. It was supposed to fix the same thing for $ionicPopup - however, if the $ionicPopup promise handler makes the system busy for a few milliseconds (such as when calling Angular's $http service), the problem happens again. In the sample code that follows, I simulate "making the system busy" by doing a tight loop for 90 ms.

To repro:

1. Create a blank Ionic starter project.
2. In index.html, make the body the following:

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Hello World</h1>
  </ion-header-bar>
  <ion-content>
    <p ng-controller="MyCtrl">Click <a href="#" ng-click="showPopup()">this</a> to show a popup.</p>
    <textarea style="height: 1000px; background-color: pink">This pink area is a textarea that covers the screen.</textarea>
  </ion-content>
  <ion-footer-bar></ion-footer-bar>
</ion-pane>
<script>
  angular.module('starter')
  .controller('MyCtrl', function ($scope, $ionicPopup) {
    $scope.showPopup = function () {
      $ionicPopup.confirm({'title': 'foo', 'template': 'bar'})
      .then(function () {
        var start = Date.now();
        while (Date.now() - start < 90) {
          // Tight loop.
        }
      });
    };
  });
</script>

1. Run the app in the emulator or on an iPhone. You may need to adjust the 90ms busy time higher or lower, but 90ms works for me on both the emulator and iPhone 4S running IOS 7.
2. Click the link to show a popup.
3. Click OK.

// Expected: The keyboard does not appear.
// Actual: The keyboard appears, and the textarea does not have focus.

Interestingly, the issue does not happen with $ionicActionSheet - just with $ionicPopup.

The same code for $ionicActionSheet, for which the problem does NOT happen:

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Hello World</h1>
  </ion-header-bar>
  <ion-content>
    <p ng-controller="MyCtrl">Click <a href="#" ng-click="showActionSheet()">this</a> to show an action sheet.</p>
    <textarea style="height: 1000px; background-color: pink">This pink area is a textarea that covers the screen.</textarea>
  </ion-content>
  <ion-footer-bar></ion-footer-bar>
</ion-pane>
<script>
  angular.module('starter')
  .controller('MyCtrl', function ($scope, $ionicActionSheet) {
    $scope.showActionSheet = function () {
      $ionicActionSheet.show({
        buttons: [{text: "A"}, {text: "B"}, {text: "C"}],
        buttonClicked: function () {
          var start = Date.now();
          while (Date.now() - start < 90) {
            // A 90 ms tight loop to simulate the system being busy for a
            // few milliseconds, e.g., calling Angular's $http service.
          }
          return true;
        },
        cancelText: 'Cancel'});
    };
  });
</script></span>

[JonathanAquino]

A workaround that seems to work is to wrap the promise handler in $timeout(..., 0).

[perrygovier]

Hey @JonathanAquino, a recent fix may have also fixed this, can you confirm it's still present. If so, could you provide a working codepen or JS Fiddle example for us to reference?

[JonathanAquino]

Here is a codepen: http://codepen.io/anon/pen/kLnzC . You can repro the problem by trying the codepen on an iPhone. Note that the keyboard appears when you click OK.

[mhartington]

Just tried this with beta 14, seems to no longer be an issue.
Closing for now. Feel free to reopen if this is still an issue for you.