Google Chrome bug in onchange on select dropdown
Posted on September 12th, 2008 by whinger. Filed under Web Development.
So a classic web developer trick is to use the onchange event of a dropdown to change another field in the form. Yes, there are accessibility issues with this (keyboard+screenreader users could trigger the onchange event while scrolling through the options) but FF3 and WebKit both seem to have realised this and if you change the value keyboard-wise they only trigger onchange when you blur. Of course IE7 is behind the curve on this (surprise) but with luck IE8 might catch up.
Anyway, Chrome seems to have a problem with setting focus() to another object from within the onchange event – while the focus works fine and the new field is focussed correctly, it fails to update the existing selectbox to the new value.
There is a workaround (of course) and it’s fairly straightforward: replace
linkedField.focus();
with
setTimeout(function (){linkedField.focus()}, 5);
and all is fine.
Safari doesn’t exhibit this so I don’t know if it’s something google has done or if it’s just Safari’s more recent webkit version. Let’s hope that it’s fixed before the beta period ends!
February 9th, 2009 at 1:41 pm
This is actually a serious bug – your getaround might get you out of a hole, but if an AJAX command is hanging off an onchange event, and that AJAX event never gets called, it ends becoming a complete showstopper. In my case, I have a pair of related dropdownlists – a fairly common scenario – when the user selects an item in DDL#1, this event triggers a server-side function (via AJAX) which populates DDL#2. Except in Chrome it doesn’t. Works fine in IE (all flavours), Firefox and Safari. This is a serious bug which Google need to sort out soon.
February 9th, 2009 at 1:45 pm
Alex: I don’t really see how your ajax event isn’t being called; I think something else is going on.
My problem is specific to the focus because chrome seems to set the focus to the changed object _after_ this.onupdate is called (so setting the focus makes no difference) – there should be nothing stopping your ajax event from taking place 🙁
I suppose it’s possible that your ajax function is checking the focused object (although I’m not sure how!!) – if so can you make the event pass the object as a parameter instead?
March 12th, 2009 at 3:36 am
I have the same scenario as Alex – my onchange event is
This fails!
Funny as it is, this works!
See the case, onChange appose to onchange.
work
Works just fine!!
April 29th, 2009 at 9:24 pm
Well, you really shouldn’t be putting onchange in a tag anymore, the DOM way is as follows:
var ddl = document.getElementById(‘myDropDown’);
if (ddl) {
ddl.addEventListener(‘change’, ddl_OnChange, false);
}
December 16th, 2009 at 6:44 am
in my case
>>>
$(‘#select_app_’+idObj).bind(‘change’, function(){
getViewComboDyna(‘select_portal_’+idObj, this.value, ‘select_view_’+idObj);
});
its not working guyz.
April 21st, 2012 at 10:33 am
I enjoy this website! The content is invaluable. Thanks a lot for most of the posts and making my morning. Compliments!
June 12th, 2012 at 11:01 am
I have it working in IE7,8,safari and ff on both MAC and Windows.
Chrome works in Windows.
Chrome fails on a MAC.
Anyone know the fix as this is going back to the old netscape days. Extremely poor. The MR OO mess is rearing its super ugly head.
November 26th, 2012 at 5:16 pm
This is still busted in Chrome. Thanks for posting this original article. It is still relevant.
May 25th, 2014 at 6:35 am
This actually answered my drawback, thank you! defebcgfkced