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 comment:1
owner: | → boyanpenev |
---|---|
status: | new → pending |
Changed September 27, 2011 08:47AM UTC by comment:2
status: | pending → new |
---|
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 comment:3
resolution: | → worksforme |
---|---|
status: | new → closed |
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 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 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 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.
I don't understand this. How are
return false
/event.preventDefault()
andif/else
mutually exclusive?