Keyboard activation (enter/spacebar) breaks RadButton OnClientClicking handler

4 posts, 0 answers
  1. Orion
    Orion avatar
    2 posts
    Member since:
    Dec 2011

    Posted 18 Dec 2013 Link to this post

    In Q3 2013 SP1, the OnClientClicking handler of the RadButton will not get called after using the keyboard (enter key or spacebar) to activate the RadButton. 

    <!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>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                function clickHandler(sender, args)
                {
                    args.set_cancel(true);
                }
            </script>
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <div>
            <telerik:RadButton ID="btnTest" runat="server" Text="Test Me" OnClientClicking="clickHandler"></telerik:RadButton>
        </div>
        </form>
    </body>
    </html>


    The issue seems to have something to do with the set_cancel() call; if the button is changed to "AutoPostBack=false" and the set_cancel() call is removed, the behavior returns to (mostly) normal. In that case, things work as expected when the enter key activates the button, but the spacebar still causes erratic behavior.

    Is there a different way to preserve OnClientClicking behavior with keyboard activation of RadButtons or is this a bug?
  2. Joana
    Admin
    Joana avatar
    70 posts

    Posted 23 Dec 2013 Link to this post

    Hello Aaron,

    The set_cancel() method indicates whether the event will be canceled. As you have set true value to the method the behavior is expected and it should work the same way if it's clicked by the mouse. You could find useful this article about the OnClientClicking event.  I have attached a video showing the behavior of the OnClientClicking event on my end when pressing the button using the keyboard and the mouse.

    I hope you find this information helpful.

    Regards,
    Joana
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Orion
    Orion avatar
    2 posts
    Member since:
    Dec 2011

    Posted 23 Dec 2013 Link to this post

    Hi Joana,

    I should have been clearer in my initial post; the handler works as expected until the keyboard is used, after which it no longer fires on mouse events.

    I.e., using the snippet I provided:

    1. Click button with mouse - handler is called (as expected)
    2. Activate button with keyboard - handler is called (as expected)
    3. Click button with mouse again - handler is not called.
    4. Activate button with keyboard again - handler is called.

    The issue lies in step 3 - after using the keyboard to activate the button, the handler no longer gets called for mouse clicks, but only on keyboard events. I would expect the handler to continue to be called regardless.

  5. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 26 Dec 2013 Link to this post

    Hi,

    Thank you for clarifying the issue.

    I have reproduced the issue only when I put an alert in the OnClientClicking handler. I have logged it into our system and the issue will be resolved for the next official release Q3 2013 SP2 scheduled for 15th of January 2014.

    Until then, you can use the following workaround which should be placed at the end of the form:
    <script type="text/javascript">
        Telerik.Web.UI.RadButton.prototype._keyDownEnter = function(args) {
            this._enterKeyDown = true;
            var e = args.rawEvent;
            e.returnValue = false;
            if (e.preventDefault) {
                e.preventDefault();
            }
     
            if (this._clickRaised) {
                return $telerik.cancelRawEvent(e);
            }
            if (this._raiseClickingAndValidate(e)) {
                this._enterKeyDown = false;
                this._clickRaised = false;
                return $telerik.cancelRawEvent(e);
            }
            this._clickRaised = true;
            this._toggleState(args);
            this._firePrivateClick(e);
        };
        Telerik.Web.UI.RadButton.prototype._keyDownSpace = function(args) {
            var e = args.rawEvent;
            if (this._clickRaised) {
                return $telerik.cancelRawEvent(e);
            }
            this._clickRaised = true;
            if (this._raiseClickingAndValidate(e)) {
                this._isCancelled = true;
                this._clickRaised = false;
                return $telerik.cancelRawEvent(e);
            }
            this._toggleState(args);
            return $telerik.cancelRawEvent(e);
        };
    </script>


    Regards,
    Nikolay
    Telerik
    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 the blog feed now.
Back to Top