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

How to prevent popup close on scroll

5 Answers 436 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Taras
Top achievements
Rank 2
Taras asked on 10 Aug 2015, 12:37 PM

The name of the topic is from the docs. But this recipe doesn't work for  Kendo 2015 Q2 

Open the link bellow 

http://docs.telerik.com/kendo-ui/web/dropdownlist/how-to/prevent-close-on-scroll

And press 'Edit this example'.

In dojo You will see the 'bug'. If You choose library  Q2 or Q2 SP1, You can't scroll list at all.

Work perfectly for Q1 branch.

Video. http://screencast.com/t/3z0uEDleCP‚Äč

5 Answers, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 12 Aug 2015, 07:56 AM

Hello Taras,

Thank you for contacting us.

We will investigate what is causing the issue and try to fix it as soon as possible. 

Please excuse us for any inconvenience this may cause. 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jacob
Top achievements
Rank 1
Veteran
answered on 04 Sep 2020, 05:47 AM

Hello. I'm reviving this issue because it is still taking place. Scrolling past the end of the result list closes the list, which I've found to be a very frustrating behavior. I'm sure many end users find it frustrating as well. Attached is a screen recording of me demonstrating how this same defect does not take place in native browser drop downs, but does take place with the Kendo autocomplete list.

I tried to use the close event to preventDefault if the event which triggered the close was a mouse wheel, but I couldn't find a way. Please advise.

close: function (e) {
  // won't work because "e" doesn't have a "type" property like normal JavaScript event objects do
  if (e.type === "wheel") {
    e.preventDefault();
  }
}
0
Petar
Telerik team
answered on 07 Sep 2020, 01:58 PM

Hi Jacob,

Can you check this Dojo example and let me know if the reported behavior is replicable in it?

To create the above Dojo, I've used this Prevent Popup Closure on Scroll example as a basis. What is important in both of the previous links is the following code that prevents the closing of the popup.

 var widget = $("#products").data("kendoAutoComplete");

          widget.ul.parent().on("wheel", function(e) {
            var container = this;

            if ((container.scrollTop == 0 && e.originalEvent.deltaY < 0) ||
                (container.scrollTop == container.scrollHeight - container.offsetHeight &&
                 e.originalEvent.deltaY > 0)) {
              e.preventDefault();
              e.stopPropagation();
            }

          });

Check the provided links and let me know if they resolve your issue.

Regards,


Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jacob
Top achievements
Rank 1
Veteran
answered on 08 Sep 2020, 01:36 PM

Hi Petar,

Thanks for the reply. That code snippet solved the issue for me! It's cool that this solution for the dropdown also works for autocomplete. As a quality of life enhancement, I would like to suggest making this a configurable option for both dropdowns, autocomplete, and any other applicable widget. Something like this:

$("#products").kendoAutoComplete({ closeOnScroll: false });
0
Petar
Telerik team
answered on 10 Sep 2020, 09:26 AM

Hi Jacob,

I am happy to hear that the suggested snippet has resolved the issue on your end!

Thank you for your suggestion, I will discuss it with the team and we may consider the implementation of something similar to the "closeOnScroll" property.

Regards,
Petar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
AutoComplete
Asked by
Taras
Top achievements
Rank 2
Answers by
Plamen Lazarov
Telerik team
Jacob
Top achievements
Rank 1
Veteran
Petar
Telerik team
Share this question
or