Difficult to select option (with mouse) if large portions of it match currently selected option.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. populate a UFD field with a list of data where at least 1 option contains 
another as a substring, for example:  'Template' and 'test Template'
2. preselect the shorter option (e.g. 'Template') in the list by marking it as 
selected in the html
3. now try to select the other (e.g. 'test Template') with the mouse.  

What is the expected output? What do you see instead?
The option should be highlighted like any other option in the list.
However, the option won't allow itself to be selected with the mouse if the 
cursor is placed over the matching text (e.g. over the 'Template' part of 'test 
Template').  If you click on the 'Template' part of the option, then that 
option remains selected.

What version of the product are you using? On what operating system?

UFD 0.6
Windows XP, 32bit
FireFox 5

Please provide any additional information below.
I have addEmphasis = true

After looking at this I'm getting this vague feeling that this is intentional 
behaviour, but I'm not sure.  If it is intentional, then I would expect some 
other visual cue that you're not selecting that item, but rather that matching 
part of the string.

Original issue reported on code.google.com by aru...@anm.org on 4 Jul 2011 at 5:15

[GoogleCodeExporter]

AAAah..  Ok, so the mouse over/out/click events for the scroll list have a 
filter:

if ( "LI" == e.target.nodeName.toUpperCase() ) {

And if you have addEmphasis 'On', then the text has been wrapped in an 'em' tag 
- which likely means that it doesn't get past the filter, and it shouldn't.  
But it might be that check for an EM tag and then replacing 'e' with the parent 
LI tag would do the trick.

Original comment by aru...@anm.org on 4 Jul 2011 at 7:21

[GoogleCodeExporter]

Indeed, replacing the initial filter in the event handler with:

var $target = $(e.target);
if ( $target.is("EM") ) {       
    $target = $target.parent();
}
if ( $target.is("LI")  )

and replacing uses of e.target with $target as appropriate

correctly handles the mouseover mouseout and click events.

Original comment by aru...@anm.org on 4 Jul 2011 at 7:40

[GoogleCodeExporter]

I suppose that checking:
if ($target.parent().is("LI")) {

instead of looking for the EM, would be more robust in case the method for 
emphasizing was changed to a span with a fancy style instead of an EM tag.

Original comment by aru...@anm.org on 4 Jul 2011 at 7:47

[GoogleCodeExporter]

Thanks for your detailed suggestions, I have commited a fix based on your ideas 
:)

Original comment by thetoolman on 21 May 2012 at 5:45

• Changed state: Fixed