Skip to content

bug: Clicking ionicActionSheet clicks textarea behind it #2204

@JonathanAquino

Description

@JonathanAquino

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions