IE problem - autoscroll on focus problem

6 posts, 0 answers
  1. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 05 Jul Link to this post

    Hello,

     

    I have a problem with the listview widget, that occurs just in IE11.

    Please open the demo: http://demos.telerik.com/aspnet-core/listview/keyboard-navigation

    Run this command in the console: $('#main').css({ height: 400, overflow: 'auto' }).find('.product-view.k-widget').on('click', function () { alert('clicked'); });

    What we do: Set the main area to a small height and set it scrollable. Add click listener to all items and show an alert on click.

    If you now click on an item, everything is working as expected. Now scroll down with $('#main').scrollTop(700); and try to click one of the bottom items of the list. In this moment the widget gets the focus and scrolls to its beginning, but the click is not registered. In my application I also have a scrollable container with a listview inside and I need to register item clicks. Our application MUST work in IE11, because our customer is just using IE. It would be great if you analyze the problem and fix it in the future. For now I definately need a workaround asap. Thank you.

  2. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 05 Jul in reply to Jan Link to this post

    The problem just occurs in the keyboard-navigation example, because here the listView is set to .navigatable() and so its focusable (I need this feature for my application because of the accessibility). The focus event in the .js file calls the .current() method, maybe the problem starts there.
  3. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 05 Jul Link to this post

    Ok, this prevents it: $('.k-widget.k-listview').on('focus', function() { return false; });

    The problem seems to be the .current() method, that pushes the scroll position to the beginning of the widget. But I also use this method on other parts of my code, so I tested it there and also could reproduce same problem. I need to call the .current() method without page scroll.

    Btw: Same problem occurs in the grid widget.

  4. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 05 Jul Link to this post

    Inside the .current() method, there is a ._scrollTo() call. I think this causes the problem. Is it possible to prevent the call of this method? I can't overwrite it with i.e.:

    $('.k-widget.k-listview').data('kendoListView'))._scrollTo = function () { return false; };
  5. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 05 Jul Link to this post

    I think the only workaround for the moment is to set the click listener not to the items but to the widget. Then I can read the .current() item and run further actions. Please fix the _scrollTo method in the future for the IE11.
  6. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 07 Jul Link to this post

    Hello Jan,

    Thank you for the detailed information.

    I found the same issue in our backlog, but it was a lower priority as it was very specific.

    Still, I was able to reproduce it in Chrome as well and added a higher priority to it. You can track its progress at:

    https://github.com/telerik/kendo-ui-core/issues/897

    I hope the mentioned workaround will achieve the desired result until the issue is resolved.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top