Skip to main content

Search and Top Navigation

#8576 closed bug (notabug)

Opened September 13, 2012 10:04PM UTC

Closed September 29, 2012 08:58AM UTC

During focus event, link classes are hidden in IE7

Reported by: nathanyan Owned by: nathanyan
Priority: minor Milestone: 1.9.0
Component: ui.autocomplete Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:
Description

Very curious bug that I've only seen in IE7 (IE8 works fine, as does Chrome):

I have my autocomplete defined so that it will add a css class to whichever suggestion was chosen (and it will wipe that class from all the other possibilities):

$('#searchbox').autocomplete({
  source: itemNames,
  focus: function(event, ui) { //highlight as user scrolls through options (keyboard up/down)
    $("ul.ui-autocomplete li.ui-menu-item a").removeClass("highlight");
    $("ul.ui-autocomplete li.ui-menu-item a").filter(function(index) {return $(this).text() == ui.item.value}).addClass("highlight");;
  }
});

While the addClass works fine, the removeClass has no effect at all - you can see this is you set breakpoints and step through these two lines. The result is that all of the elements become highlighted as you scroll through.

Further curiosities:

If you try to read the existing css classes on the link elements within this function, they're blank:

$($("ul.ui-autocomplete li.ui-menu-item a")[0]).attr('class')

All of this works outside of the autocomplete event, e.g. if you run this in the JS console manually, all the highlighted classes will be cleared:

$("ul.ui-autocomplete li.ui-menu-item a").removeClass("highlight");
Attachments (0)
Change History (4)

Changed September 13, 2012 10:18PM UTC by nathanyan comment:1

I set up a jsfiddle example here:

http://jsfiddle.net/dUm2F/

type "a" to get all the autocomplete entries to show up, then keyboard down to iterate through them. Note that the css class is getting applied, but not taken off.

Changed September 13, 2012 10:39PM UTC by nathanyan comment:2

As a workaround to anyone else with this issue, the following works instead of removeClass (though the functionality is a little different):

//$("ul.ui-autocomplete li.ui-menu-item a").removeClass("highlight");
$("ul.ui-autocomplete li.ui-menu-item a").attr("class","");

Changed September 14, 2012 12:18PM UTC by scottgonzalez comment:3

owner: → nathanyan
status: newpending

I'm not seeing any problems with your fiddle or my cleaned up version: http://jsfiddle.net/dUm2F/1/

Also, there's already a class for what you want, .ui-state-focus. You should just style that appropriately.

Please make sure you don't have any browser plugins enabled and try to confirm on another machine.

Changed September 29, 2012 08:58AM UTC by trac-o-bot comment:4

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!