Beta 14: collection-repeat filter focus problem with $ionicScrollDelegate

[NoelLH]

Beta 14 seems to have introduced a bug with collection-repeat.

My use case is very similar to the demo here except that I also want my large collection to scroll to the top of the list each time the filter text is changed, on the fly.

(As an aside, I think this might be better default behaviour? Without it, scrolling down a long list then filtering can mean that results are hidden from view off the top of the screen.)

I forked the collection-repeat demo codepen but had to remove most of the data since it appears to break on the actual Codepen site, as somebody has commented.

All I've changed from the demo is:

• Ionic version
• implemented $scope.scrollTop() - this was already referenced in an ng-change in the demo but just not in place

The function looks like

$scope.scrollTop = function() {
  $ionicScrollDelegate.scrollTop();
}

Here is it:

• working in beta 13
• broken in beta 14

Expected/ working/ beta13 behaviour: list scrolls up but filter box keeps focus so you can keep typing.

Actual/ broken/ beta14 behaviour: the filter and scroll to top work, but the box loses focus, making it practically unusable for searches longer than 1 character.

[ffalcinelli]

Yup, I'm experiencing the exact same problem. Seems like $ionicScrollDelegate.scrollTop(); steals focus whereas in beta13 it was not acting in this way.

[dreamershl]

it is because now all the scrolling function add 1 more line "blurAll()". To avoid this issue, you can just getScrollView().scrollTo(0, 0, !!shouldAnimate).

self.scrollTop = function(shouldAnimate) {
   ionic.DomUtil.blurAll();
   self.resize().then(function() {
   scrollView.scrollTo(0, 0, !!shouldAnimate);
  });
};

[NoelLH]

Nice, thanks very much for that. I presume this side effect is still unintended for scrollTop(), but your suggestion looks like a solid workaround for my case.

[ffalcinelli]

Probably It's me, but I'm still losing focus when scrolling up. I'm invoking $ionicScrollDelegate.scrollTo(0, 0, false); and focus is lost.

Using $ionicScrollDelegate.getScrollView().scrollTo(0, 0, false); has no effect on the list.

What am I missing? Could you please update your codepen? I'd be very glad :)

[NoelLH]

It works for me with exactly that second line I'm afraid - jumps back to the top on change if you've scrolled down. Here's an updated codepen with the workaround: http://codepen.io/NoelLH/pen/EayGYd

It seems fine in my actual app where it's a bit more complicated too.

[ffalcinelli]

Ok, I found it. Just in case someone else has the same problem, I had to setup a delegate handle on my ion-content to make it work:

<ion-content delegate-handle="myScrollContent">
...
</ion-content>

Then in the controller:

$scope.scrollTop = function(){
    $ionicScrollDelegate.$getByHandle('myScrollContent').getScrollView().scrollTo(0, 0, true);
};

Hope this helps someone else!