This is a migrated thread and some comments may be shown as answers.

IE problem - autoscroll on focus problem

5 Answers 192 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 05 Jul 2017, 05:41 AM

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.

5 Answers, 1 is accepted

Sort by
0
Jan
Top achievements
Rank 1
answered on 05 Jul 2017, 05:51 AM
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.
0
Jan
Top achievements
Rank 1
answered on 05 Jul 2017, 06:02 AM

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.

0
Jan
Top achievements
Rank 1
answered on 05 Jul 2017, 06:23 AM

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; };
0
Jan
Top achievements
Rank 1
answered on 05 Jul 2017, 06:37 AM
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.
0
Stefan
Telerik team
answered on 07 Jul 2017, 12:36 PM
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 (charts) and form elements.
Tags
ListView
Asked by
Jan
Top achievements
Rank 1
Answers by
Jan
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or