Ionic-framework: bug: Clicking ionicActionSheet clicks textarea behind it

Created on 13 Sep 2014  路  7Comments  路  Source: ionic-team/ionic-framework

Type: bug

Platform: ios 7 webview

If you click the $ionicActionSheet and a textarea is behind where you clicked, the keyboard appears and the textarea doesn't have focus.

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="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 () { return true; },
        cancelText: 'Cancel'});
    };
  });
</script>
  1. Click the link to show an action sheet.
  2. Click the Cancel button in a spot that is on the footer (i.e., not on the textarea). The action sheet disappears and no keyboard appears, as expected.
  3. Click the link to show the action sheet.
  4. Click the A button, or any button on a spot that is not on the footer (i.e., on the textarea).

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

Most helpful comment

I'm facing this issue, but in a very specific scenario, it only happens when I tap it the very FIRST time and only in iOS. To simulate that, I need to reinstall the app or reboot the iphone.

Do you guys have some thoughts about what I could try to fix it?

I've been played around with it for a while, but didn't find anything.

Thanks in advance!

All 7 comments

My workaround for this is to disable the textarea then re-enable it 100ms after the action sheet closes. Would be nice to get a proper fix for this though.

This bug can really break the UI. The keyboard hangs around even when you leave the current view. You can get into situations like a modal dialog whose buttons are being blocked by the keyboard, and there's nothing you can do.

This problem also seems to happen with $ionicPopup.

Thanks for the example! Should be fixed now.

Sweet - thanks!

I'm facing this issue, but in a very specific scenario, it only happens when I tap it the very FIRST time and only in iOS. To simulate that, I need to reinstall the app or reboot the iphone.

Do you guys have some thoughts about what I could try to fix it?

I've been played around with it for a while, but didn't find anything.

Thanks in advance!

Same issue here, it only happens when I tap it the very FIRST time and only in iOS.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

manucorporat picture manucorporat  路  3Comments

danbucholtz picture danbucholtz  路  3Comments

alexbainbridge picture alexbainbridge  路  3Comments

MrBokeh picture MrBokeh  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments