IE problem - autoscroll on focus problem

[Jan]

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.

[Jan]

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.

[Jan]

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.

[Jan]

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; };

[Jan]

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.

[Stefan]

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