How to prevent popup close on scroll

[Taras]

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​

[Plamen Lazarov]

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

 

 

[Jacob]

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

[Petar]

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

[Jacob]

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

[Petar]

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