Skip to main content

Search and Top Navigation

#7736 closed bug (worksforme)

Opened September 23, 2011 03:14PM UTC

Closed September 27, 2011 11:47AM UTC

Last modified September 27, 2011 02:03PM UTC

Focus with mouseover erases the suggested part of the input field

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

I wish to define the following behavior on launching the focus event:

  • If the suggestion element from the autocomplete's list is focused on using the keyboard- call a predefined function to include the suggestion at a specific place in the input field and do not return false
  • If the element is focused using the mouse though- return false to avoid any modifications to the input field.

To accomplish this, i determine the event.which against a keyboard or mouse event (tried this in both directions). The keyboard segment of the if statement works like a charm, but the mouse doesn't:

When i focus on an element from the list with the keyboard, the text is replaced in the input field, but if a focus with the mouse on any element from the list afterwards, the input gets erased with only the original, manually inputted text left.

A somewhat similar behavior could be observed if one does the following in autocomplete's "Accent folding" demo (http://jqueryui.com/demos/autocomplete/):

1. Type in "j"

2. Press the arrow- down key to focus on ''Jörn Zaefferer''- the input field gets updated with the value ''Jörn Zaefferer''

3. Right after that- focus on any element of the list with mouseover- the field gets restored to it's original state, with only the letter ''j'' left

The only way to avoid erasing the field, without changing jQuery UI's code is simply returning false in the focus event, instead of determining events with if/else on event.which. I need the text replacement on keyboard though.

I think i have found a (nasty) workaround: in the function blur on line 6454 of jQuery UI 1.8.16, return false at the beginning, or comment out the whole function:

#!js
blur: function( event, ui ) {

        // my change
	return false;

	// don't set the value of the text field if it's already correct
	// this prevents moving the cursor unnecessarily
	if ( self.menu.element.is(":visible") &&
		( self.element.val() !== self.term ) ) {
		self.element.val( self.term );
	}
}

Since i am very reluctant to change the library's code, i was wondering if anybody could help me out or address the issue. Ticket [ticket:5318] addresses a similar issue, but couldn't help me any further.

Best regards,

Boyan Penev

Attachments (0)
Change History (7)

Changed September 26, 2011 05:40PM UTC by scottgonzalez comment:1

owner: → boyanpenev
status: newpending
The only way to avoid erasing the field, without changing jQuery UI's code is simply returning false in the focus event, instead of determining events with if/else on event.which. I need the text replacement on keyboard though.

I don't understand this. How are return false/event.preventDefault() and if/else mutually exclusive?

Changed September 27, 2011 08:47AM UTC by boyanpenev comment:2

status: pendingnew

I don't know if they are. What i meant is, the only way to prevent the mouse over from modifying the input field is to return false right at the beginning of focus. That is hardly a solution though, since the input field doesn't get modified at all, including on focusing with the keyboard. What I would like to do is return false only on mouse event:

Either

if (event.which <= 3)
{
    return false;
} 
else
{
    privateFunctionForReplacement();
}

or

{{{#!js

if (event.which === $.ui.keyCode.UP || event.which === $.ui.keyCode.DOWN)

{

privateFunctionForReplacement();

}

else

{

return false;

}

Changed September 27, 2011 11:47AM UTC by scottgonzalez comment:3

resolution: → worksforme
status: newclosed

So don't use event.which. Use something that actually tells you the type of event. Either a property like keyCode or directly via event.originalEvent.originalEvent.type.

Changed September 27, 2011 01:32PM UTC by boyanpenev comment:4

Thank you for the advice. I am using the keyCode property- please see the second code excerpt from my previous comment. I also tried

event.originalEvent.originalEvent.type
: although more accurate as opposed to

event.which <= 3
- it doesn't solve the problem. The comparison of events works fine (tested that one) and- in my humble opinion- is irrelevant to the issue at stake. As in said second code excerpt- any event accept cursor down or cursor up should return false- the mouse still messes up the input field.

Further- the event comparison is a workaround in itself- if you would reproduce the example with the Accent folding demo mentioned in the original post you would see the unexpected behavior.

As i pointed out in the original post- i think this behavior is caused by the blur function defined on line 6454 of jQuery UI 1.8.16

Changed September 27, 2011 01:42PM UTC by scottgonzalez comment:5

I don't see how the accent folding demo has unexpected behavior. I'm also not sure why you're pointing out that demo specifically since it has the exact same behavior as the default demo. Are you actually suggesting that we change the default behavior of mouse focusing? If so, that wasn't at all clear from your ticket.

Changed September 27, 2011 02:01PM UTC by scottgonzalez comment:6

Ok, I finally see what you're talking about. Canceling the focus event isn't useful for what you want because of the blur handler having the same functionality. I'm going to create a new ticket that is more clear about this.

Changed September 27, 2011 02:03PM UTC by scottgonzalez comment:7

Created #7742.