Keyboard autoclose on combobox scroll

[SwanB]

How to close keyboard on combobox scroll and re-reaise the keyboard on clicking in the combobox again ?

We want to close / Collapse keyboard on scrolling of combo box(to avoid overlap on small device screen), and then if click on text combobox then raise the keyboard ( of android ).

Currently keyboard is overlapping the combobox list so we need to hide the keyboard

[Magdalena]

Hi,

to achieve the described behavior you can blur the ComboBox input when scroll started. You can achieve if by the following JavaScript:

aspx:

<telerik:RadComboBox runat="server" OnClientDropDownOpened="dropDownOpened" AllowCustomText="true" >

JavaScript:

function dropDownOpened() {
    $(".rcbScroll").scroll(function () {
        $(".rcbInput").blur();
        $(".rcbScroll").off("scroll");
    })
}

You can improve behavior of the solution for cases when there is selected some below item, so the .rcbScroll is scrolled by opening the popup. For the purpose you can add a scroll counter index.


Regards,
Magdalena
Progress Telerik

[SwanB]

Thank you for getting back to me.

We are using a Kendo kombobox for Appbuilder/Cordova(not ASP.NET).

We need to dropdown or close android virtual keyboard on scrolling of combobox values,  and re-rising the virtual keyboard on click of combobox.

Due to the small screen size, the keyboard is currently overlapping the combobox list so we need to hide the keyboard.

Any suggestion illustrated in in jsfiddle / Kendo dojo is welcome.

( PS. Improved behavior of the solution, for cases when there is selected some item below is absolutely interesting, but second in priority )

 

[Magdalena]

Hi,

The previous solution works for RadComboBox widget, so we would like to apologize for the mistake. We are afraid that the described behavior is not supported, but you can add a custom JavaScript logic to achieve the behavior.

We have created this Dojo sample where we added a scroll event when popup is opened. There we blur the combobox input, so touch device keyboard will be hidden. After refocusing the input, the keyboard will be shown again.

Regards,
Magdalena
Progress Telerik

[SwanB]

Hi,

Thank you ,
the Dojo sample is perfectly hiding device keyboard and reraising virtual keyboard on click of combobox.

Now however, when we use that keyboard scroll code then paging-/load data on scroll stops working, (in the scrolling combobox).

(If we remove that keyboard down on scroll code then paging is working properly again. After adding code for keyboard down we get the other data, but scrolling is consistently set only in first page)

How can tht be fixed ?

[Magdalena]

Hello,

The provided workaround works properly only when combobox virtualization is disabled. Actually this is a limitation of the solution as the virtualization functionality works properly only when combobox input is focused.

Regards,
Magdalena
Progress Telerik

[SwanB]

Hi,

If I understand you correctly, does this mean that the control implementation of device keyboard in the Kendo control suite does not not work if the virtualized dataloading functionality of a control is enabled ?

We assumed that the Kendo controls were designed for use on mobile devices(also) so we would be very happy for suggestions or alternatives for how to implement this rather regular behaviour(virtualized dataloading functionality and keyboard control of the device keyboard) on mobile devices.

Best regards,
SwanB

[Magdalena]

Hello SwanB,

Actually keeping the combobox input focused after dropdown scrolling is expected behavior. If the input is focused, the keyboard is shown. Hiding keyboard by scrolling combobox popup is a custom scenario.

Regards,
Magdalena
Progress Telerik