RadDropDownList won't close when selecting item

[Kevin F]

I have a number of RadDropDownLists on a page inside a RadAjaxPanel.  I populate them in the code-behind.

However, when I select an item, the list won't close.  It stays open until I click somewhere outside of the RadDropDownList.

Any ideas?  I'm running the latest install of the ASP.Net AJAX tools.

Thanks!

[Bozhidar]

Hi Jason,

I tested the described scenario but couldn't reproduce the issue you are specifying. I've attached the sample page I used. Can you confirm whether this page is working correctly on your end.
 
All the best,
Bozhidar
the Telerik team

[Kevin F]

It works fine all by itself, but when I put it into my master page it won't close when I select an item.

Here is the test page.  

<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="server">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
            </telerik:RadDropDownList>
        </telerik:RadAjaxPanel>
</asp:Content>

See the master page content below.  

<div id="mainMenu">
    <asp:LoginView ID="ctlLoginViewMainMenu" runat="server">
        <AnonymousTemplate></AnonymousTemplate>
        <LoggedInTemplate>
            <telerik:RadTabStrip ID="ctlMainMenuTabs" runat="server">
                <Tabs>
                    <telerik:RadTab Text="Home" runat="server" NavigateUrl="~/Default.aspx"></telerik:RadTab>
                    <telerik:RadTab Text="Queue" runat="server" NavigateUrl="~/Queue.aspx"></telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Sex Offenders" NavigateUrl="~/SexOffenders.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Terminated SO" NavigateUrl="~/TerminatedOffenders.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Offices" NavigateUrl="~/MaintainOffices.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Cities" NavigateUrl="~/MaintainCities.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Lat/Long" NavigateUrl="~/MaintainLatLong.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Offenses" NavigateUrl="~/MaintainOffenses.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Statutes" NavigateUrl="~/MaintainStatutes.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="DNA" NavigateUrl="~/CompleteDna.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Reports" NavigateUrl="~/Reports/Default.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Search" NavigateUrl="~/Search.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Users" NavigateUrl="~/Users/Default.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Public Users/Notifications" NavigateUrl="~/Public/Default.aspx">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Users" NavigateUrl="~/Public/Accounts.aspx" Visible="false"></telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Notifications" NavigateUrl="~/Public/Notifications.aspx" Visible="false"></telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </LoggedInTemplate>
    </asp:LoginView>
    <div class="clear"></div>
</div>
<div id="content">

    <form runat="server" id="frmContentMain">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

        <asp:ContentPlaceHolder ID="cphContent" runat="server"></asp:ContentPlaceHolder>
    </form>



</div>

[Bozhidar]

Hello Jason,

I moved the code to a content page, but I was still unable to reproduce the issue. I've attached the modified web site. Please take a look at it and see if it works correctly on your end. If I missed something, please make the necessary modifications to the page so that the issue reproduces and paste the code here, so that I can troubleshoot the issue locally. Also, can you specify if the problem occurs on all browsers or just a specific one. Can you also check for any javascript errors when you click on an item.
 
Regards,
Bozhidar
the Telerik team

[Kevin F]

I think it may have something to do with my style sheets.  I'm going to do some testing and will report back.

Thanks!

[Ross Dunham]

Hey Jason,
Any luck on this one?  I am experiencing the same behavior.
The drop down list "drops down", but does not close when you select an item.
You have to click somewhere else for the menu to close.

Were you able to figure out how to resolve this?
Thanks!!!
Ross

[Kevin F]

I'm finally able to work on it today.  

Do you have style sheets on your page?  They seem to work fine without any other style on the page.

I'll see what I can dig up today and report back.

[Kevin F]

Ok this is very interesting.  It doesn't look to have anything to do with styles, but perhaps DIV tags?

Using the code below for the body of the page, clicking an item in the RadDropDownList DOES NOT close the list.

<div>
    <form runat="server" id="frmContentMain">
        <telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
                <Items>
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                </Items>
            </telerik:RadDropDownList>
        </telerik:RadAjaxPanel>
    </form>
</div>

However, putting the DIV tags inside the FORM tag instead of surrounding the FORM tag the RadDropDownList DOES close when you click an item.

<form runat="server" id="frmContentMain">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
                <Items>
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="1" Value="1" />
                </Items>
            </telerik:RadDropDownList>
        </telerik:RadAjaxPanel>
    </div>
</form>

I'm happy to report it is working for me now, but I'm definitely curious about this behavior.

[Ross Dunham]

Hey Jason.
Well it took me a bunch of trial and error to find out what was causing this for my page.
I also thought it was style related, but I stripped all the styles from my project and it was still happening.

So I rebuilt my master page one DIV at a time until I figured out what was causing it.

I had placed my FORM tag inside a <DIV>. 

Causes Issue

<body>
    <div>  
<form id="frmBody" runat="server">
    <telerik:RadScriptManager ID="rsmMaster" runat="server"></telerik:RadScriptManager>

If I moved the FORM outside of the DIV, then the drop down list closes upon selecting an item.

Works Properly

<body>
    <form id="frmBody" runat="server">
<div>
    <telerik:RadScriptManager ID="rsmMaster" runat="server"></telerik:RadScriptManager>

Not sure if this is what is causing the issue for you, but this fixed it for me.
Good luck!
Ross

[Ross Dunham]

Damn, I didn't see your post until now.  That was the fix for me too...

[Kevin F]

Hahaha excellent.  Great minds think alike!

Wouldn't mind hearing back from Bozhidar on this one.

[Bozhidar]

Hi guys,

You are absolutely correct.

Placing an element between the body and the form breaks the initialization of the DropDown popup element, which in turns causes faulty behavior. 

We have noticed this behavior a couple of weeks ago and we have since fixed it, so if you get our latest build things should be working fine.
 
Kind regards,
Bozhidar
the Telerik team

[Kevin F]

Thanks Bozhidar!