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

[Andrew]

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?

[Veli]

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

[Andrew Lawrence]

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!

[Veli]

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

[Andrew Lawrence]

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.

[Veli]

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

[Andrew Lawrence]

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);
            }
        });
    }
}