$ionicScrollDelegate scrollTop lose focus on input field

ionic-v1
1

This happened after upgrade to beta14. When the text field value changes I want to call scrollTop to make sure the filtered list is always scrolled to the top. but with beta14, teh text field lose focus once the scrollTop is called. any workaround?

$scope.$watch("filter", function(e, v){
	$ionicScrollDelegate.scrollTop();
});
2

I was able to refocus by adding angular.element(document.querySelector(’#searchField’))[0].focus(), but the device keyboard still disappears, any fix?

3

Same issue with me. It happens after I upgrade to beta 14

4

+1. I seem to be having the same problem but with scrollBottom().

5

+1
Here is a codepen that shows the behavior in beta 14:

(the embedded codepen doesn’t misbehave for me, strangely. But the problem appears in browser and on Android)

6

+1 Trying to upgrade from beta13 to 14 and ran into this one. Filtering a list via user input is pretty common, hoping for a quick fix/workaround so this regression doesn’t block update for long.

7

same problem with scrollBottom(). I opened an issue.

@tsurrel: your embedded code does misbehave for me.

8

for me using

$ionicScrollDelegate.scrollTop();

generate this error:

TypeError: Cannot read property 'scrollTo' of null
    at http://localhost:8100/lib/ionic/js/ionic-angular.js:6607:17

the part of code that generate the error is this:

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

I’m using “ionic”: “driftyco/ionic-bower#1.0.0-beta.14-nightly-937”,
@mhartington is best to post this here (that is a bug, not problem with framework, or open an issue? )

9

Same issue here:

After scrollTop function called, focus is lost… any fix ?!

  • I’m using Ionic Version is Last Beta 14
11

+1

The issue is you guys call blurAll now for some reason

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

As a temp fix you can comment the contents of the function

/**
 * @ngdoc method
 * @name ionic.DomUtil#blurAll
 * @description
 * Blurs any currently focused input element
 * @returns {DOMElement} The element blurred or null
 */
blurAll: function() {
  // if (document.activeElement && document.activeElement != document.body) {
  //   document.activeElement.blur();
  //   return document.activeElement;
  // }
  return null;
},
12

+1

As a temporary fix that only disables the blurAll in this particular case, I added a second boolean parameter to the scrollTop function:

  self.scrollTop = function(shouldAnimate, noBlur) {
    // do not blur! the input loses its focus...
    if (!noBlur) {
      ionic.DomUtil.blurAll();
    }
    self.resize().then(function() {
      scrollView.scrollTo(0, 0, !!shouldAnimate);
    });
  };

and call the scrollTop function like this:

$ionicScrollDelegate.scrollTop(true,  true);
2 Likes
13

Also running into this issue. This needs a fix guys!

Also: Thanks @lorenz for this workaround. Works great.

14

Also having this issue - would be great to have an official fix!

15

I use ng-model-options to provide a fix

ng-model-options="{ updateOn: 'blur' }"

This will update the model when the input is out of focus/blur

ng-model-options="{ debounce: 500 }"

This will update the model when the user hasn’t changed the model after 500ms

  • but this will still take focus off the input.

Either way offer a pretty good alternative, even a combination of them both. Check the link below.

Angular API Reference

1 Like