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

Force RadComboBox to blur in JavaScript

3 Answers 303 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 02 Apr 2011, 03:51 AM
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?

3 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 07 Apr 2011, 05:02 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sasp
Top achievements
Rank 1
answered on 24 Apr 2020, 11:25 AM

"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?

0
Vessy
Telerik team
answered on 29 Apr 2020, 10:23 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
ComboBox
Asked by
Stefan
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Sasp
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or