Force RadComboBox to blur in JavaScript

[Stefan]

I'm not able to get my RadComboBox to blur when interacting with the mouse. I have the control extended to incorporate a RadTreeView (as in http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/treeviewcombobox/defaultcs.aspx?product=combobox), with some enhancements.

I have 2 use cases:
1) A user types text and the treeview is filtered as they type (all my code). They can use the arrows keys to change selections in the TreeView and hit enter to select it. The selection doesn't actually go into the ComboBox because I allow multiple selections, so after they hit enter, the item they selected is added to a table and focus drops.
After this, the ComboBox shows its empty message and the cursor disappears from the input area of the ComboBox.

2) A user types text and the treeview is filtered (as above). They can use the mouse to click an item and add it to the list.
After this, the ComboBox closes but the empty message doesn't not show. The cursor is in an empty input region in the ComboBox.

My goal is for case #2 to also drop focus on the combobox after they click, but no matter what I do, I can't get the combobox to blur until I click elsewhere on the page with the mouse.

I've tried the solutions offered in http://www.telerik.com/community/forums/aspnet-ajax/combobox/removing-combobox-focus.aspx and have tried calling this function after the item is clicked:

function BlurComboBox(comboBox) {
    if (comboBox.get_dropDownVisible() && comboBox.get_closeDropDownOnBlur())
        comboBox.hideDropDown();

    comboBox.get_tableElement().className = "";
    comboBox._selectItemOnBlur();
    comboBox.get_inputDomElement().blur();
    comboBox._raiseClientBlur(window.event);
    comboBox._focused = false;
}

The function executes but nothing ever changes in the combobox.

I can't just set focus elsewhere on the page - that doesn't make sense. I just want to blur the combobox so its state resets.

How can I do this?

[Dimitar Terziev]

Hi Stefan,

Have you tried the approach suggested by my colleagues:

<script type="text/javascript" language="javascript">

    function onLoad(sender) {
        var div = sender.get_element();

        $telerik.$(div).bind('mouseenter', function() {
            if (!sender.get_dropDownVisible())
                sender.showDropDown();
        });

        $telerik.$(".RadComboBoxDropDown").mouseleave(function(e) {
            hideDropDown("#" + sender.get_id(), sender, e);
        });

        $telerik.$(div).mouseleave(function(e) {
            hideDropDown(".RadComboBoxDropDown", sender, e);
        });
    }

    function hideDropDown(selector, combo, e) {
        var tgt = e.relatedTarget;
        var parent = $telerik.$(selector)[0];
        var parents = $telerik.$(tgt).parents(selector);

        if (tgt != parent && parents.length == 0) {
            if (combo.get_dropDownVisible())
                combo.hideDropDown();
        }
        combo.get_inputDomElement().blur();
        combo._raiseClientBlur(e);
        combo._focused = false;
    }

</script>

This approach is working in the general case so it may work for you also.

If this doesn't help, please open a support ticket and provide us with a runnable version of you project so we could examine your exact scenario.

Greetings,
Dimitar Terziev
the Telerik team

[Sasp]

"OnClientBlur" in RadComboBox not working in iPhone when I want to hide the same dropdown. I am tabbing in iPhone tab(^) and (^ opposite) symbol from mobile keypad. "OnClientFocus" is working fine, but "OnClientBlur" not working. 

Any Idea?

[Vessy]

Hi Sasp,

I tried to reproduce the reported behvaior but the OnClientBlur is triggered properly at my end with the latest version of the controls (2020.1.114). Can you, please, elaborate a bit on the exact scenario in which the problem is faced?

• Which version of the controls do you use?
• In which browser does the problem occurs?
• In which iPhone and iOS version are you facing the issue?

Below you can see the setup I usd for my test. Are you reproducing the same problem with it?

        <script>
            function onBlur(comboBox, args) {
                alert("blur");
            }
        </script>
        <telerik:RadComboBox ID="RadCombobox1" runat="server" OnClientBlur="onBlur">
            <Items>
                <telerik:RadComboBoxItem Text="Item1" Value="1" />
                <telerik:RadComboBoxItem Text="Item2" Value="2" />
                <telerik:RadComboBoxItem Text="Item3" Value="3" />
                <telerik:RadComboBoxItem Text="Item4" Value="4" />
            </Items>
        </telerik:RadComboBox>
        <telerik:RadTextBox ID="TextBox1" runat="server"></telerik:RadTextBox>
   

Regards,
Vessy
Progress Telerik