Opened 7 years ago

Closed 7 years ago

#8576 closed bug (notabug)

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

Change History (4)

comment:1 Changed 7 years ago by nathanyan

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.

comment:2 Changed 7 years ago by nathanyan

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","");

comment:3 Changed 7 years ago by Scott González

Owner: set to 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.

comment:4 Changed 7 years ago by trac-o-bot

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!

Note: See TracTickets for help on using tickets.