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!



9 Responses to “Google Chrome bug in onchange on select dropdown”

  1. Alex Roberts Says:

    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.

  2. whinger Says:

    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?

  3. Loren Wheale Says:

    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!!

  4. Mike Branstein Says:

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

  5. vinay Says:

    in my case
    >>>
    $(‘#select_app_’+idObj).bind(‘change’, function(){
    getViewComboDyna(‘select_portal_’+idObj, this.value, ‘select_view_’+idObj);
    });

    its not working guyz.

  6. really Says:

    I enjoy this website! The content is invaluable. Thanks a lot for most of the posts and making my morning. Compliments!

  7. lefty Says:

    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.

  8. Bret Says:

    This is still busted in Chrome. Thanks for posting this original article. It is still relevant.

  9. Johnf295 Says:

    This actually answered my drawback, thank you! defebcgfkced

Trackback URI | Comments RSS

Leave a Reply


Blogroll

Categories