#8608 closed bug (wontfix)

Opened September 29, 2012 09:18AM UTC

Closed September 29, 2012 12:58PM UTC

Last modified September 29, 2012 01:02PM UTC

During focus event, link classes are hidden in IE7

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

Reopening #8576 - very sorry but I didn't get any email alerts for the older ticket until it closed.

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

jsfiddle here: http://jsfiddle.net/dUm2F/

Instructions:

1. Use Internet Explorer 7 or equivalent rendering mode

1. In textbox, type "a" to get all the autocomplete entries to show up

1. Keyboard down to step through them. Note that the css class is getting applied, but not taken off.

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","");
Attachments (0)
Change History (4)

Changed September 29, 2012 09:23AM UTC by nathanyan comment:1

scott.gonzalez made a comment on the previous ticket:

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.

Scott, were you certain you tested in IE7 and not any different browser? My specific environment is the IE7 rendering mode in IE9, on Windows7 64-bit, which I've verified on a couple different machines (but both the same browser/OS setup).

Here's a screenshot showing the behavior on jsfiddle in IE7 after I've pressed keydown 3 times: http://i.minus.com/iD1A4YQRQxFVJ.png

For the second, I originally did this because I couldn't find any other css class that was added. I do notice a .ui-state-hover class when I mouseover an image, but I don't see any new class applied on keydown/up. Example from Chrome:

http://i.minus.com/ibsPkdub2S2XXk.png

Changed September 29, 2012 09:25AM UTC by nathanyan comment:2

Also as a side question, last time I didn't reply to the ticket because I didn't get any email updates when scott added his comment. How do I set up my jquery trac preferences to send me email alerts on new comments? I had the following set up but none seemed to do the trick:

  • always notify me when a ticket that I own is created or modified
  • always notify me when a ticket that I reported is modified
  • always notify me when one of my watched wiki or tickets is updated

Changed September 29, 2012 12:58PM UTC by scottgonzalez comment:3

resolution: → wontfix
status: new → closed
Scott, were you certain you tested in IE7 and not any different browser?

Yes, the difference here is that I actually tested in IE7 and you did not. I can confirm the behavior when using IE9 in IE7 mode.

I'm not sure what's going on here, but I'm not inclined to investigate any further, since using .ui-state-hover works just fine: http://jsfiddle.net/dUm2F/2/

Changed September 29, 2012 01:02PM UTC by scottgonzalez comment:4

Regarding email notifications, it looks like you have everything set up properly. I'm not sure why you didn't get the other email notification.