[Solved] Bug with Combobox Dropdown

[Levi]

Whenever you click on the very bottom of a combobox, it highlights in response to the hover but does not respond to mouse clicks. Several times i experienced this before figuring out what was causing it.

You can replicate by moving your cursor to the very bottom of the combobox. You will see the hover has fired... Now click and see that nothing happens.

I tried other combo boxes to see if this behavior was standard, but it wasn't.

[Levi]

Telerik,

Any word on this? It is definitely a bug and can even be reproduced in the demos section on both IE and Firefox. The bottom 4 pixels of the combo box does not respond to clicks even though the combobox shows as highlighted.

This makes your combo box and therefore my application look broken. You can drag and highlight the combobox and see for yourself that there is a box inside another container and the bottom part of the container is not clickable.

Many times i have clicked on the combobox and thought it was broken only to realize i was clicking on it too low again.

Please patch this or at least respond with an update on how to fix on my end.

Thanks,
Levi

[Simon]

Hello Levi,

We are aware of this issue and have it logged in our bug-tracking system. Hopefully we will fix it in the upcoming weeks.

As a workaround you could handle the OnClientLoad event of the ComboBox as shown below:

function onLoad(sender, eventArgs) {
    var input = sender.get_inputDomElement();
    $telerik.$(input.parentNode).click(inputTableCellClick);
}

function inputTableCellClick() {
    $find(this.firstChild.id.replace("_Input", "")).showDropDown();
}

Regards,
Simon
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Levi]

I tried this but keep getting an error saying object does not support property or method. Could it be because im using 2008 Q3? Here is my code:

    <telerik:RadComboBox ID="RadComboBox3" runat="server" Skin="Vista" OnClientSelectedIndexChanged="valueChanged"
        AllowCustomText="false" CssClass="Combo" OnClientLoad="comboOnLoad">
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="Today" Value="RadComboBoxItem1" />
            <telerik:RadComboBoxItem runat="server" Text="Yesterday" Value="RadComboBoxItem2" />
            <telerik:RadComboBoxItem runat="server" Text="Last 7 Days" Value="RadComboBoxItem3" />
            <telerik:RadComboBoxItem runat="server" Text="Last 30 Days" Value="RadComboBoxItem4" />
            <telerik:RadComboBoxItem runat="server" Text="This Month" Value="RadComboBoxItem5" />
            <telerik:RadComboBoxItem runat="server" Text="Last Month" Value="RadComboBoxItem6" />
            <telerik:RadComboBoxItem runat="server" Text="This Year" Value="RadComboBoxItem7" />
            <telerik:RadComboBoxItem runat="server" Text="All Time" Value="RadComboBoxItem8" />
        </Items>
        <ExpandAnimation Type="None" Duration="0"></ExpandAnimation>
        <CollapseAnimation Type="None" Duration="0"></CollapseAnimation>
    </telerik:RadComboBox>

<script type="text/javascript">
    function inputTableCellClick() {
            $find(this.firstChild.id.replace("_Input", "")).showDropDown();
        }
        function comboOnLoad(sender, eventArgs) {
            var input = sender.get_inputDomElement();    
            $telerik.$(input.parentNode).click(inputTableCellClick);
        }  
</script>

Thanks,
Levi

[Simon]

Hello Levi,

Yes, the error is raised because the jQuery scripts have been included in the Telerik.Web.UI assembly since Q1 2009.

Please use the modified script shown below:

function onLoad(sender, eventArgs) {
    var input = sender.get_inputDomElement();
    $addHandler(input.parentNode, "click", inputTableCellClick);
}

Regards,
Simon
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Levi]

Post edited... See follow up post.

[Levi]

Actually this doesn't work as it seems to break the combo box. If the page has loaded for the first time and you open the combobox by clicking on the bottom, it does not see the mouse when trying to select options. I have to close and reopen it in order to select something. Any ideas?

[Simon]

Hello Levi,

There was a bug prior to Q1 2009 which manifested as you described.

In order to workaround the bug in your versions, please add the following code to the inputTableCellClick function as shown below:

function inputTableCellClick() {
    $find(this.firstChild.id.replace("_Input", "")).get_items();
    $find(this.firstChild.id.replace("_Input", "")).showDropDown();
}

All the best,
Simon
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Levi]

That works! Thanks for the excellent support!

Levi