IE9 Issue : Textbox in dock maintains focus after collapsing dock

4 posts, 0 answers
  1. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 24 Jan 2012 Link to this post

    Hello,

    I have a textbox control in raddock content and click on it to give it the focus. When I click the collapse command button, the content area is hidden (including the textbox) but the blinking caret still visible. Even typing will go into the textbox even though the caret does not move at all.

    This is observed only under IE9. In other browsers, the textbox will lose the focus when clicking the collapse button so the above behaviour does not occur.
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 27 Jan 2012 Link to this post

    Hello Abdul,

    Indeed, the caret of the TextBox control is visible when the RadDock is collapsed under IE9. This behavior will be brought to the attention of our developers, although I cannot provide a firm estimate when a fix will be available.

    For the time being you can use the OnClientCommand client-side event of the RadDock in order to remove the focus of the inner textbox when the dock control is collapsed. Below you can check the suggested solution:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <script type="text/javascript">
            function OnClientCommand(sender, args) {
                if (args.Command.get_name() == "ExpandCollapse" && $telerik.isIE9) {
                    var textbox = $get("<%=Textbox1.ClientID %>");
                    textbox.blur();
                }
            }
        </script>
        <div>
            <telerik:RadDock runat="server" ID="RadDock" OnClientCommand="OnClientCommand">
                <ContentTemplate>
                    <asp:TextBox ID="Textbox1" runat="server" />
                </ContentTemplate>
            </telerik:RadDock>
        </div>
        </form>
    </body>
    </html>

    I have also used the telerik Telerik static client library method isIE9 in order to isolate this workaround only for the Internet Explorer 9 browser.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Razak
    Razak avatar
    20 posts
    Member since:
    Oct 2011

    Posted 27 Jan 2012 Link to this post

    Thank you for your reply.

    However I have modified the script so that it will only remove focus from any input element inside the dock content which currently has the focus:
    function OnClientCommand(sender, args) {
        if (args.Command.get_name() == "ExpandCollapse" && $telerik.isIE9) {
            if (args.Command.get_state() == '2') {
                var dock = $get(sender.get_id());
                var input = $(dock).find(".rdContent input:focus");
                if (input.length > 0) input[0].blur();
            }
        }
    }


    The only thing that I'm not sure of is how to get the triggering dock client id without having to hard-code using the inline script-block (E.g <%=RadDock1.ClientID%>)? The intention is so that the above script can be used on any RadDock controls on the page.



  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 31 Jan 2012 Link to this post

    Hi Abdul,

    Indeed, my example only demonstrated the base approach and it needs to be modified in order to remove the focus from all contained input elements.

    Note that the parameter sender of the event-handler OnClientCommand references the client-object of the RadDock that has triggered the event. This means that you can set this handler to all RadDocks on your page and then you can use the sender parameter to manage the dock control on the client via the methods in this help article.
    <telerik:RadDock runat="server" ID="RadDock" OnClientCommand="OnClientCommand">
        <ContentTemplate>
            <asp:TextBox ID="Textbox1" runat="server" />
        </ContentTemplate>
    </telerik:RadDock>

    Also, the Client API of RadDock includes a method get_contentContainer that can be used in your implementation for getting the content of the control.

    I hope the provided information helps. Feel free to contact us again if you need further assistance.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top