After using the tab key, can't scroll to the top

ionic-v1
1

When using the tab key or the next button on an device keyboard the scroll seems to get out off sync.

Use the folowing steps to reproduce this:

  1. Have an form with more fields then fits the screen
  2. Tab through the fields until the field which is not visible gets the focus
  3. Now try to reach the the top of the page with the mouse

It keeps scrolling back to the wrong position.

To make it easier i forked an existing codepen and edited to show the problem.

This happens on all devices i have. Android 4.4.3 and also Android 5.0.1.
Also tested at the latest v1.0.0-rc.0 off ionic.

2 Likes
2

+1. Facing the same issue. I can replicate this on Chrome as well.

2 Likes
3

@martindiphoorn did you see a fix come through from Ionic for your issue? What was your workaround?

I wanted to share a couple of things we noticed while investigating the issue.

  1. It seems to be a $scrollDelegate issue related to overflow-scroll with Ionic scroll.

  2. If “overflow-scroll = true” is used on , the scroll out-of-sync issue gets resolved on tabs. The compromise with native scrolling is that when focus is on a form field, the keyboard pops up, the top of is displayed and scrolling gets locked.

  3. Not sure how much Android keyboards vary but in Android we only saw the tab / “Next” option when the numeric keyboard was displayed.

Unfortunately we didn’t have the time to dive much deeper and resorted to workarounds. We’ve currently disabled the “tab” key on the last element.

app.directive('ngPreventTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 9) {
                event.preventDefault();
            }
        });
    };
});

Another workaround is to disable tabs on form elements using “tabindex = -1”.

Hope this helps others. We really struggled with understanding what was occuring and whether it was our code or Ionic that was causing this behaviour. Thanks to this post we didn’t beat ourselves up too much :smile:

2 Likes
4

Do you guys know when will it be fixed?