Template control focus closes menu

[Christian]

I have a problem where some mobile devices (ipad and android) closes the menu when focusing on a textbox inside an template. The scenario can be seen below on the Login tab.

http://www.mrplant.se

On desktop browsers it seems to be working as intended.

[Christian]

After updating to the latest build it also seems like the RadSiteMapNode with navigateurl stops working.

Menu code below,

<telerik:RadMenu ID="menu" Runat="server" EnableEmbeddedSkins="false" Skin="mrplant" Width="100%" OnClientLoad="clientLoad" CollapseAnimation-Duration="600" ExpandAnimation-Duration="600" CollapseAnimation-Type="OutQuart" ExpandAnimation-Type="OutQuart">
    <Items>
        <telerik:RadMenuItem runat="server" Text="Home" Value="home" NavigateUrl="Default.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Company" Value="about" NavigateUrl="about.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Products" Value="products" PostBack="false" GroupSettings-OffsetX="-24">
            <ContentTemplate>
                <div class="menuProductContent">
                    <table width="100%">
                        <tr>
                            <td style="vertical-align:top;">
                                <h1><asp:Label runat="server" ID="labProductgroupsHeader" Text="Product groups"></asp:Label></h1>
                                <telerik:RadSiteMap runat="server" ID="productIndex" EnableEmbeddedSkins="false" Skin="mrplant" DefaultLevelSettings-ListLayout-RepeatDirection="Vertical" DefaultLevelSettings-ListLayout-RepeatColumns="2" OnNodeDataBound="productIndex_NodeDataBound">
                                    <Nodes>
                                        <telerik:RadSiteMapNode Text="Singlestems & sprays" NavigateUrl="products.aspx?productgroup=1"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="flowers" NavigateUrl="products.aspx?productgroup=2"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Succulents & round shaped items" NavigateUrl="products.aspx?productgroup=3"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Potted and hanging bushes" NavigateUrl="products.aspx?productgroup=4"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Garlands" NavigateUrl="products.aspx?productgroup=5"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Trees" NavigateUrl="products.aspx?productgroup=6"></telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode Text="Candlerings & wreaths" NavigateUrl="products.aspx?productgroup=7"></telerik:RadSiteMapNode>
                                    </Nodes>
                                </telerik:RadSiteMap>
                            </td>
                            <td style="text-align:right; vertical-align:top;">
                                <asp:Panel runat="server" ID="panSearch" DefaultButton="btnSearch">
                                    <h1><asp:Label runat="server" ID="labSearchHeader" Text="Search"></asp:Label></h1>
                                    <telerik:RadTextBox runat="server" ID="txtSearch" EmptyMessage="Partno. / Description" EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadTextBox>
                                     <telerik:RadButton runat="server" ID="btnSearch" Text="Search" EnableEmbeddedSkins="false" Skin="mrplant" OnClick="btnSearch_Click"></telerik:RadButton>
                                </asp:Panel>
                                <br />
                                <asp:Panel runat="server" ID="panPage" DefaultButton="btnPage">
                                    <%--<h1><asp:Label runat="server" ID="labPageHeader" Text="Page"></asp:Label></h1>--%>
                                    <telerik:RadNumericTextBox runat="server" ID="txtPage" NumberFormat-DecimalDigits="0" EmptyMessage="Catalogue page no." EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadNumericTextBox>
                                     <telerik:RadButton runat="server" ID="btnPage" Text="Go to" EnableEmbeddedSkins="false" Skin="mrplant" OnClick="btnPage_Click"></telerik:RadButton>
                                </asp:Panel>
                                <asp:Panel runat="server" ID="panCart">
                                    <br /><br />
                                    <telerik:RadButton runat="server" ID="btnCart" Text="Gå till kundvagn" EnableEmbeddedSkins="false" Skin="mrplant" PostBackUrl="cart.aspx"></telerik:RadButton>
                                </asp:Panel>
                            </td>
                        </tr>

                    </table>
                </div>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Contact" Value="contact" NavigateUrl="contact.aspx">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Administration" Value="administration" PostBack="false" ForeColor="IndianRed" Visible="false" GroupSettings-OffsetX="400">
            <ContentTemplate>
                <div class="menuContents" style="width:200px;">
                    <%--<asp:HyperLink runat="server" ID="hlAdmStatistics" Text="Statistics" NavigateUrl="~/admStatistics.aspx"></asp:HyperLink>
                    <br />--%>
                    <asp:HyperLink runat="server" ID="hlAdmTranslations" Text="Translations" NavigateUrl="~/admTranslations.aspx"></asp:HyperLink>
                    <br />
                    <asp:HyperLink runat="server" ID="hlAdmEmails" Text="Emails" NavigateUrl="~/admEmails.aspx"></asp:HyperLink>
                    <br />
                    <asp:HyperLink runat="server" ID="hlAdmSettings" Text="General" NavigateUrl="~/admSettings.aspx"></asp:HyperLink>
                </div>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Log in" Value="login" NavigateUrl="#" GroupSettings-OffsetX="-24" PostBack="false">
            <ContentTemplate>
                <asp:Panel runat="server" ID="panLogin" DefaultButton="btnLogin" CssClass="menuLoginContent">
                    <table width="100%">
                        <tr>
                            <td style="text-align:left; vertical-align:top">
                                <h1><asp:Label runat="server" ID="labNoLoginHeader" Text="Not a member?"></asp:Label></h1>
                                <asp:Label runat="server" ID="labResellerOnly" Text="Please note that we only sell to distributors!"></asp:Label>
                                <br /><br />
                                <asp:Label runat="server" ID="labNoLogin" Text="If you already are a reseller of our products but need an account"></asp:Label>
                                <asp:HyperLink runat="server" ID="hlContact" Text="contact us" NavigateUrl="~/contact.aspx"></asp:HyperLink>
                                <br />
                                <asp:Label runat="server" ID="labBecomeReseller" Text="If you would like to become a reseller "></asp:Label><asp:HyperLink runat="server" ID="hlRegister" Text="click here to register" NavigateUrl="~/register.aspx"></asp:HyperLink>
                                <br />
                                <asp:Label runat="server" ID="labRecoverPassword" Text="Lost your password? "></asp:Label><asp:HyperLink runat="server" ID="hlRecoverPassword" Text="click here to recover" NavigateUrl="~/recoverPassword.aspx"></asp:HyperLink>
                            </td>
                            <td style="text-align:right; vertical-align:top">
                                <h1><asp:Label runat="server" ID="labLoginHeader" Text="Log in"></asp:Label></h1>
                                <telerik:RadTextBox runat="server" ID="txtUsername" EmptyMessage="Username" EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadTextBox>
                                <br /><br />
                                <div id="Password" style="display:none;">
                                    <telerik:RadTextBox runat="server" ID="txtPassword" ClientEvents-OnBlur="OnBlur" EnableEmbeddedSkins="false" Skin="mrplant" TextMode="Password"></telerik:RadTextBox>
                                </div>
                                <div id="PasswordMask">
                                    <telerik:RadTextBox runat="server" ID="txtPasswordMask" EmptyMessage="Password" ClientEvents-OnFocus="OnFocus" EnableEmbeddedSkins="false" Skin="mrplant"></telerik:RadTextBox>
                                </div>
                                <br /><br />
                                <telerik:RadButton runat="server" ID="btnLogin" Text="log in" EnableEmbeddedSkins="false" Skin="mrplant" OnClick="btnLogin_Click"></telerik:RadButton>
                            </td>
                        </tr>
                    </table>
               </asp:Panel>
            </ContentTemplate>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="[userAccount]" Value="userAccount" PostBack="false" GroupSettings-Flow="Horizontal" GroupSettings-ExpandDirection="Down" GroupSettings-OffsetX="700">
            <ContentTemplate>
                <asp:Panel runat="server" ID="panActAs" Visible="false" Width="100%" BackColor="#b1ce9b">
                    <div Style="padding-left:15px; padding-right:15px; padding-top:10px; padding-bottom:10px;">
                        <telerik:RadComboBox AutoPostBack="true" runat="server" MarkFirstMatch="true" ID="cmbActAsCustomers" Filter="Contains" Width="100%" EnableEmbeddedSkins="false" Skin="mrplant" ZIndex="9000" OnSelectedIndexChanged="cmbActAsCustomers_SelectedIndexChanged"></telerik:RadComboBox>
                    </div>
                </asp:Panel>
                <div class="menuAccountContent">
                    <asp:HyperLink runat="server" ID="hlAccount" Text="Account" NavigateUrl="~/account.aspx"></asp:HyperLink>
                    <br />
                    <asp:HyperLink runat="server" ID="hlUsers" Text="Users" NavigateUrl="~/users.aspx"></asp:HyperLink>
                    <br />
                    <asp:HyperLink runat="server" ID="hlOrderhistory" Text="Order history" NavigateUrl="~/orders.aspx"></asp:HyperLink>
                    <br />
                    <asp:HyperLink runat="server" ID="hlInvoicehistory" Text="Invoice history" NavigateUrl="~/invoices.aspx"></asp:HyperLink>
                    <br /><br />
                    <asp:LinkButton runat="server" ID="lbLogout" Text="Logout" OnClick="lbLogout_Click"></asp:LinkButton>
                </div>
            </ContentTemplate>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

 

 Javascript

<telerik:RadCodeBlock runat="server" ID="codeblockMenu1">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
    function clientLoad(sender) {
        var nodeLogin = sender.findItemByValue("login");
        var nodeAccount = sender.findItemByValue("userAccount");
        //var accountChild = nodeAccount.get_openedItem;

        if (nodeLogin != null) {
            nodeLogin.get_element().style.cssText = "float: right;";
        }

        if (nodeAccount != null) {
            nodeAccount.get_element().style.cssText = "float: right;";
            //accountChild.style.cssText = "float: right; position:none;";
        }
    }

</script>
</telerik:RadCodeBlock>

 

 

 Menu skin,

 

.RadMenu_mrplant ul.rmRootGroup,
.RadMenu_mrplant div.rmRootGroup
{
    padding: 0px 0;
    border: 0px solid #ffffff;
    border-bottom:5px solid #b1ce9b;
    background-color: #ffffff;
    margin-bottom:-0px;
}

/* <Root items> */

.RadMenu_mrplant,
.RadMenu_mrplant a.rmLink
{
    /*font: normal 9pt/19px "Sans-serif", Verdana;*/
    color: #000;
    text-decoration: none;
    line-height:25px;
    padding:0px;
}

.RadMenu_mrplant .rmItem a.rmLink
{
    padding: 0px 22px;
    cursor:pointer;
}

.RadMenu_mrplant .rmHorizontal a.rmLink .rmText
{
    padding-right: 0;
}

.RadMenu_mrplant a.rmRootLink .rmText
{
    padding-left: 0;
}


.RadMenu_mrplant ul.rmVertical .rmText
{
    padding-right: 0px;
}


.RadMenu_mrplant .rmItem a.rmLink:hover,
.RadMenu_mrplant .rmItem a.rmFocused,
.RadMenu_mrplant .rmItem a.rmSelected
{
    padding: 0 22px;

}

.RadMenu_mrplant .rmItem a.rmExpanded,
.RadMenu_mrplant .rmItem a.rmExpanded:hover
{
    padding: 0 22px;
}

.RadMenu_mrplant .rmItem a.rmDisabled,
.RadMenu_mrplant .rmItem a.rmDisabled:hover
{
    padding: 0px 22px;
    cursor:default;
    color:transparent;
}


/* </Root items> */


/* <Submenu items> */

.RadMenu_mrplant .rmGroup,
.RadMenu_mrplant .rmMultiColumn,
.RadMenu_mrplant .rmGroup .rmVertical
{
    background: #ffffff;

}

.RadMenu_mrplant .rmGroup .rmVertical .rmTemplate
{
    background: none;
}

.RadMenu_mrplant .rmGroup .rmItem a.rmLink
{
    padding: 0px;
    margin: 0px 0;
}

.RadMenu_mrplant .rmGroup .rmItem a.rmLink:hover,
.RadMenu_mrplant .rmGroup .rmItem a.rmFocused,
.RadMenu_mrplant .rmGroup .rmItem a.rmSelected,
.RadMenu_mrplant .rmGroup .rmItem a.rmExpanded,
.RadMenu_mrplant .rmGroup .rmItem a.rmExpanded:hover
{
    background:#fff;
    padding: 0;
}

 div.RadMenu_mrplant .rmItem .rmLink:hover /*överliggande flik, när man hovrar*/
{
    background-color: rgb(255, 255, 255);
}

 div.RadMenu_mrplant .rmItem .rmLink .rmExpandDown
{
    border-color: rgb(255, 255, 255);
}

 div.RadMenu_mrplant .rmItem .rmExpanded /*överliggande flik, när den är expanderad*/
{
    background:#b1ce9b;
}

 div.RadMenu_mrplant .rmItem .rmExpanded .rmText
{
    background:#b1ce9b;
}

 div.RadMenu_mrplant .rmItem .rmExpanded:hover
{
    background:#b1ce9b;

}

 .RadMenu .rmGroup  /*verkar vara underliggande itemtemplates*/
{
    background-image:none !important;
    text-align: left !Important;
    padding-left:8px !Important;
    margin-left:2px !Important;
    padding-right:8px !important;
    margin-right:2px !Important;
    border:3px solid #f6f6f6;

    -moz-border-bottom-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}

.RadMenu .rmGroup .rmLink .rmText
{
    text-align: left !Important;
    padding-left:0px !Important;
    margin-left:2px !Important;
    padding-right:0px !Important;
    margin-right:2px !Important;
    background-color:transparent;
}

.RadMenu .rmGroup .rmItem
{
     text-align: left !Important;
    padding-left:0px !Important;
    margin-left:2px !Important;
    padding-right:0px !Important;
    margin-right:2px !Important;
    border:none;
}

.RadMenu .rmTemplate .rmGroup
{
    background:none;
    background-color:none;

    border:0px;
    padding: 0px;
}

div.RadMenu .alignR .rmText
{
    text-align: right !Important;
    float:right !important;
    padding-right:0px !important;
    margin-right:2px !Important;
    padding-left:0px !Important;
    margin-left:2px !Important;
}

.RadMenu .rmItem {
    position:static !important;
}

 

Input skin,

/*global*/
.RadInput_mrplant,
.RadInputMgr_mrplant
{
  font: 14px "segoe ui",arial,sans-serif;
}


/*textbox states*/
html body .RadInput_mrplant .riTextBox,
html body .RadInputMgr_mrplant
{
  border-color: #8e8e8e #b8b8b8 #b8b8b8 #8e8e8e;
  background: #fff;
  color: #333333;
  font: 14px "segoe ui",arial,sans-serif;
  height:30px;
}
html body .RadInput_mrplant .riEmpty,
html body .RadInput_Empty_mrplant {
  color: #a5a5a5; }
html body .RadInput_mrplant .riHover,
html body .RadInput_Hover_mrplant,
html body .RadInput_mrplant .riFocused,
html body .RadInput_Focused_mrplant {
  border-color: #b1ce9b !important;
  color: #333333; }
html body .RadInput_mrplant .riRead,
html body .RadInput_Read_mrplant {
  border-color: #d0d0d0; }
html body .RadInput_mrplant .riDisabled,
html body .RadInput_Disabled_mrplant {
  border-color: #d0d0d0;
  color: #8a8a8a;
  cursor: Default; }
html body .RadInput_mrplant .riError,
html body .RadInput_Error_mrplant {
  border-color: #d51923;
  background: white 100% -298px no-repeat url('Input/sprite.gif');
  color: #d51923; }

.RadForm.rfdTextbox .RadInput_mrplant .riError[type="text"],
.RadForm.rfdTextbox .RadInput_Error_mrplant[type="text"] {
  border-color: #d51923;
  background: white 100% -298px no-repeat url('Input/sprite.gif');
  color: #d51923; }

html body .RadInput_mrplant .riNegative,
html body .RadInput_Negative_mrplant {
  color: #565656; }

.RadInput_mrplant a {
  background: transparent no-repeat url('Input/sprite.gif'); }
.RadInput_mrplant .riBtn a {
  width: 20px;
  height: 18px;
  line-height: 18px;
  background-position: 3px 5px; }
  .RadInput_mrplant .riBtn a:hover {
    background-position: 3px -45px; }
.RadInput_mrplant .riSpin a {
  width: 15px;
  height: 7px;
  line-height: 7px; }
.RadInput_mrplant a.riUp {
  background-position: 4px -98px; }
  .RadInput_mrplant a.riUp:hover {
    background-position: 4px -148px; }
.RadInput_mrplant a.riDown {
  background-position: 4px -199px; }
  .RadInput_mrplant a.riDown:hover {
    background-position: 4px -249px; }
.RadInput_mrplant .riLabel {
  color: #000; }
.RadInput_mrplant .riResizeIcon {
  background: url('Common/radActionsSprite.png') no-repeat transparent;
  background-position: -6.5px -966.5px;
  margin-bottom: -1px; }

html body .RadInputRTL_mrplant .riError,
html body .RadInputRTL_Error_mrplant {
  background-position: 3px -298px; }
html body .RadInputRTL_mrplant .riResizeIcon {
  background-position: -6.5px -986.5px; }

.RadForm.rfdTextbox .RadInputRTL_mrplant .riError[type="text"],
.RadForm.rfdTextbox .RadInputRTL_Error_mrplant[type="text"] {
  background-position: 3px -298px; }

 

 

Any help to get this working on mobile devices is very appreciated! cant figure out what I´m doing wrong and im starting to think Im either missing something obvious or there is an internal telerik bug.

two separate issues, cant click on input boxes inside the template (except for password field seems to be working for some reason) and the second issue is the sitemap navigationurl does not work. all tested on ipad safari and Android tablet.

[Dimitar]

Hi,

I was able to reproduce the issues on my side as well.
The issue with not being able to click on a link inside a RadMenuItem ContentTemplate is a known one. It has already been fixed and will be included in the Q2 2015 SP1 release. In addition, the fix also prevents the RadMenu collapsing on tapping over the link or the textbox.

However, the second issue - Unable to type in a textbox nested in RadMenuItem ContentTemplate on iOS and Android , is still not fixed. I have logged it for fixing. You may use its public Ideas & Feedback Portal item to track its status, vote for it and add comments.

Regards,
Dimitar
Telerik

[Christian]

Appreciate the feedback Dimitar, eagerly awaiting next release and a fix for the input box issue.

 Christian