In IE drop down lists fire onchange and AutoPostBack before control loses focus

7 posts, 0 answers
  1. Andrew
    Andrew avatar
    24 posts
    Member since:
    Nov 2006

    Posted 24 Nov 2010 Link to this post

    The behaviour of DropDownLists with AutoPostBack and RadAjax (for ASP .NET AJAX) is different between IE and other browsers.

    In IE, if the user uses the keyboard to change the selected value of a combo box, the AutoPostBack fires immediately. In other browsers the post back only occurs when the user tabs focus away from the control.

    This behaviour is particularly annoying because the control loses focus. I would describe this problem as a bit of a show stopper really.

    I was wondering if anyone has a good work around or if there are plans to fix this behaviour.

    BTW I believe that jquery fixes IE's change behaviour. Perhaps the same fix could be applied in RadAjax?
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 29 Nov 2010 Link to this post

    Hello Andrew,

    I cannot reproduce the behavior you are describing. I am attaching the test page I used. Can you try to reproduce this behavior in it and let us know how we can test it too.

    Veli
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Andrew Lawrence
    Andrew Lawrence avatar
    32 posts
    Member since:
    Mar 2007

    Posted 29 Nov 2010 Link to this post

    Hi thanks for looking into this.

    The page you sent exhibits the problem when I add it to a fresh solution.

    I am using Telerik.Web.UI.dll and Telerik.Web.Design.dll with version 2010.3.1109.40.

    The solution is an "out-of-the-box" Visual Studio 2010 .NET 4.0.30319 web application, with the Telerik HttpModule defined.

    I'm running XP and IE8. The user agent string of my IE8 browser is Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E).

    Actually I believe this behaviour has been evident for a number of years now!
  4. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 30 Nov 2010 Link to this post

    Hi Andrew,

    Can you give me exact steps I need to take in the page and the result I should observer?

    Veli
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Andrew Lawrence
    Andrew Lawrence avatar
    32 posts
    Member since:
    Mar 2007

    Posted 30 Nov 2010 Link to this post

    Hi Veli,

    Using the test page that you attached before, these are the steps I take once the page is running:

    FIREFOX STEPS (Correct behaviour)
    * Click on the textbox with the mouse
    * Click shift-tab to move focus on to the select element.
    * Click down to change the selected value.
    * Nothing unexpected happens
    * Click tab to move focus away from select element
    * An ajax postback occurs and the current date is shown in the label

    IE 8 STEPS (Incorrect behavior)
    * Click on the textbox with the mouse
    * Click shift-tab to move focus on to the select element
    * Click down to change the selected value
    * Ajax postback occurs and the current date is shown in the label. Focus is lost from the select element.

    Note that neither browser shows any javascript errors.
  6. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 30 Nov 2010 Link to this post

    Hello Andrew,

    Thanks for the steps. I was able to reproduce this issue as you described. Note, however, that this issue is not by any means related to any of our controls. If you replace the RadAjaxPanel with a standard UpdatePanel control, you will observe the exact same behavior. At this point, these are all standard ASP.NET controls, no RadControls on the page. The behavior you are observing is the way IE handles the selection change for the dropdown. In IE, selection is changed immediately you change the selected option from the dropdown. In Firefox, selection changes only after the dropdown is blurred. This is browser-specific behavior.

    Veli
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Andrew Lawrence
    Andrew Lawrence avatar
    32 posts
    Member since:
    Mar 2007

    Posted 01 Dec 2010 Link to this post

    JQuery to the rescue:

    function StopIEFiringSelectBoxesFiringAutoPostBackOnKeyDown() {
        if ($.browser.msie)
        {
            $('select').each(function () {
                if (this.onchange != null
                    && this.onchange.toString().indexOf('__doPostBack') >= 0) {
                    var changeEvent = this.onchange;
                    this.onchange = null;
                    $(this).change(changeEvent);
                }
            });
        }
    }
Back to Top