Opened 10 years ago
Closed 10 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 10 years ago by
comment:2 Changed 10 years ago by
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 10 years ago by
Owner: | set to nathanyan |
---|---|
Status: | new → pending |
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 10 years ago by
Resolution: | → invalid |
---|---|
Status: | pending → closed |
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!
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.