$ionicActionSheet buttonClicked fires twice in IE

ionic-v1
1

I have an action sheet in my app that when a button on the action sheet is clicked, the buttonClicked event fires twice, but only in IE.

Here is the codepen, results:

Chrome: event fired 1 time
Firefox: event fired 1 time
Internet Explorer: event fired 2 times

2

I’ve noticed that IE cannot handle <button> with ng-click without firing it twice. My workaround has been to use <a> with the button css classes and then IE will only fire ng-click once.

Below is a snippet from ionic.bundle.js. I was able to change the template from using <button> to <a> and when testing in IE, Chrome, and Firefox, the ng-click is only fired once. I’m not sure where this problem with multiple fired ng-click from button in IE, but figure this information would help you guys in locating the issue to fix in next versions.

IonicModule
    .directive('ionActionSheet'
.....
        template: '<div class="action-sheet-backdrop">' +
            '<div class="action-sheet-wrapper">' +
              '<div class="action-sheet" ng-class="{\'action-sheet-has-icons\': $actionSheetHasIcon}">' +
                '<div class="action-sheet-group action-sheet-options">' +
                  '<div class="action-sheet-title" ng-if="titleText" ng-bind-html="titleText"></div>' +
                  '<a class="button action-sheet-option" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text"></a>' +
                  '<a class="button destructive action-sheet-destructive" ng-if="destructiveText" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText"></a>' +
                '</div>' +
                '<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">' +
                  '<a class="button" ng-click="cancel()" ng-bind-html="cancelText"></a>' +
                '</div>' +
              '</div>' +
            '</div>' +
          '</div>'
1 Like