Ion-item links work in browser, but not on the device

ionic-v1
1

Hi,

I’ve spent about 3 hours trying to track this down, but I’ve run out of ideas of things to check. In my last deployment to Ionic View (and debugging on an android device) my ion-item links have stopped working - they seem to register a touch but no navigation occurs.

The links work fine in the browser.

This is on IOS (using Ionic View) and Android 5.1 using usb debugging.

The refresh works as expected

Simplest version I could come up with:

View

<ion-view view-title="Trips">
  <ion-content>  
    <ion-refresher
        pulling-text="Pull to refresh..."
        on-refresh="doRefresh()">
    </ion-refresher>
  
    <ion-list>
      <ion-item class="item-icon-right" ng-repeat="trip in trips" ng-href="#/tab/trips/{{trip.id}}">
        <h2>{{trip.date | localDate }}</h2>
        <p>{{trip.vehicleType}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Simple Controller

.controller('TripsCtrl', ['$scope', 'TripService', function($scope, TripService) {
    
    $scope.trips = {};
    $scope.doRefresh = function() {
        
        TripService.getTripsForUser()
            .then(function(trips) {
                $scope.trips = trips; 
            }).finally(function() {
                $scope.$broadcast('scroll.refreshComplete');
            });        
    }
    
    $scope.init = function(){
        $scope.doRefresh();
    }();

}])

The ion-list element has a .disable-user-behavior class added to it, though I can’t work out where this is coming from.

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v4.2.2
Xcode version: Not installed

I’ve gone through and simplified all my code down, removed functionality to try and narrow down the problem, but it still persists.

I’m stuck now, and would really appreciate any pointers as to where to look.

Cheers

2

Just to rule our some simple things, when your app was in the browser did you check the console to verify there weren’t any js errors? I’ve had apps work in the browser but not in the emulator, to find out that some odd js error was firing that didn’t effect the browser, but gave a blank emulator.
Good luck with a frustrating situation!

3

Thanks for replying, yes, I get no errors infuriatingly, just a couple of warnings that don’t have anything to do with issue (presumably):

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
[Warning] Invalid CSS property declaration at: * (ionic.css, line 9349)
4

has it ever worked in ios or android?

5

Yes, it worked on both this morning, I’ve undone step by step everything I’ve changed to try and get it working again, but I’ve clearly missed something because nothing seems to have fixed it.

Do you know what drives .disable-user-behavior being added to the list, it seems like it would prevent links being tapped and followed?

6

Good news that it was working. If you are on windows, I strongly recommend you reboot before writing more code; if you are on a mac you did rule our permissions, yeah? I can’t speak to .disable-user-behavior, never used it. When you do get it fixed pls post the answer.

BTW, I don’t use Ionic View.

7

I’m on a mac, but I’ll post back if I get it working

8

Right, got it. It’s always the simple things, I needed to get tel and geo protocols working, so I’d added:
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|maps|geo):/);
Of course when running in the browser, this presents no problem, however when running on a device, resources are accessed using file://, changing the regex to:
/^\s*(https?|ftp|mailto|tel|maps|geo|file):/ fixed the issue

9

Wow. So how did you figure that out? Just scanning code and the word “file” stood out?

10

No, I fired up the chrome remote inspector for a connected android device. That let me see the actual links in question - they were all pre-fixed with unsafe:, I knew what that meant since it was the reason I added the sanitization in the first place - to remove unsafe for geo: and maps

Added file back into the whitelist and it all worked.