We are seeing a JavaScript error when we select an Option in a Select control with a ASP Postback on IE11 via keyboard input. <%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %> <script runat="server"> void Page_Load(object sender, EventArgs e) { decorator.DecoratedControls = FormDecoratorDecoratedControls.Select; } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DD Test Page</title> </head> <body> <form id="DialogForm" runat="server"> <telerik:RadScriptManager runat="server" /> <telerik:RadAjaxManager runat="server" /> <telerik:RadFormDecorator ID="decorator" runat="server" DecorationZoneID="Panel1" EnableEmbeddedSkins="false" RenderMode="Lightweight" /> <telerik:RadAjaxPanel ID="Panel1" runat="server"> <asp:DropDownList ID="DD1" runat="server" AutoPostBack="true"> <asp:ListItem Text="[Select]" Value="" /> <asp:ListItem Text="T1" Value="1" /> <asp:ListItem Text="T2" Value="2" /> </asp:DropDownList> <asp:Button runat="server" Text="Refresh" /> </telerik:RadAjaxPanel> </form> </body> </html> Reproduce by clicking the DropDown control, and then pressing 'T', and then clicking on a blank section of the page.
The tooltip is not showing when RadFormDecorator decorate asp:CheckBox and asp:RadioButton. For example: <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:CheckBox runat="server" Text="Update" ToolTip="Update Last Name" /> <asp:RadioButton runat="server" Text="Update" ToolTip="Update Last Name" /> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Removing the title attribute from the label element fixes the issue: <telerik:RadScriptManager runat="server" ID="RadScriptManager1"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> </Scripts> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <script type="text/javascript"> function pageLoad() { $telerik.$("label[class*='rfdRadio'],label[class*='rfdCheckbox']").removeAttr("title"); } </script> <asp:CheckBox runat="server" Text="Update" ToolTip="Update Last Name" /> <asp:RadioButton runat="server" Text="Update" ToolTip="Update Last Name" />
For the time being you can manually add/remove the outline style for the focus state of the checkboxes/radio buttons: CSS: <style> .rfdRealInput:focus { outline: 1px dotted !important; } .outlineClass { outline: 1px dotted !important; } </style> JavaScript: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> function pageLoad() { $('input[type=checkbox],input[type=radio]').each(function () { this.addEventListener('focus', function () { addOutlineClass(this) }); this.addEventListener('blur', function () { removeOutlineClass(this) }); }); } function addOutlineClass(checkbox) { $(checkbox.nextSibling).addClass("outlineClass"); } function removeOutlineClass(checkbox) { $(checkbox.nextSibling).removeClass("outlineClass"); } </script> ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:TextBox ID="Textbox1" runat="server" /> <asp:RadioButtonList ID="Radiobuttonlist1" runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:RadioButtonList> <asp:CheckBoxList ID="Checkboxlist1" runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:CheckBoxList>