$ionicActionSheet appears to be hidden by $ionicBackdrop starting in beta v8


#1

Hi, I have a page that shows the $ionicActionSheet when a button in a header is clicked or when a marker in a LeafLetJS map is clicked. Everything worked great and as expected until I migrated from beta v6 to beta v8 and even beta v9. The action sheet still works fine when the button in the header is clicked. However, when the marker is clicked, the screen is greyed out by what appears to be the $ionicBackdrop and the action sheet is not displayed. When you click on the screen, the $ionicBackdrop disappears and the action sheet momentarily appears and then disappears.

Here is a sample project showing this behavior with beta v9. http://codepen.io/ideainabox/pen/Dxfhs Please use IE as it actually replicates the same behavior I am seeing in my iPhone 5 app. Firefox and Chrome do nothing when the marker is clicked.

In IE you may also notice that the action sheet appears twice when the button in the header is clicked. I don’t know if that is an IE/CodePen specific issue since I don’t see it in my iPhone 5 app, Chrome, nor Firefox.

Let me know if you have any questions to troubleshoot this issue.

Thanks,

Jun


#2

I got it to work on chrome, or at least to produce the issue you’ve described. Though it only shows once.

Anyways, can you open an issue for this and reference the codepen?


#3

That’s odd… I couldn’t get it to do anything in Chrome when I clicked the marker but could do it in IE. At least I now know that its not just me. I’ll go ahead and open an issue for this.


#4

In case anyone is interested, perrygovier solved this problem when I opened it as an issue. This was his response:

First up, our tap/click implementation eats up subsequent tap/clicks, so you need a data-tap-disabled=“true” attribute to get around that.

Next up, when calling angular methods from non-angular code, it’s often necessary to call a $scope.$apply() to kick the two-way binding tires so to speak.

Here’s a working example of your codepen: