Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#7736 closed bug (worksforme)

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:

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 5318 addresses a similar issue, but couldn't help me any further.

Best regards,

Boyan Penev

Change History (7)

comment:1 Changed 8 years ago by Scott González

Owner: set to 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?

comment:2 Changed 8 years ago by boyanpenev

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

if (event.which === $.ui.keyCode.UP || event.which === $.ui.keyCode.DOWN)
{
    privateFunctionForReplacement();
}
else
{
    return false;
}

comment:3 Changed 8 years ago by Scott González

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.

comment:4 Changed 8 years ago by boyanpenev

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

comment:5 Changed 8 years ago by Scott González

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.

comment:6 Changed 8 years ago by Scott González

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.

comment:7 Changed 8 years ago by Scott González

Created #7742.

Note: See TracTickets for help on using tickets.