Autocomplete textfield and ajax: tab key fires up ajax before setting autocomplete value

I've set up another test form for this. It turns out that we have both "#ajax" and "#autocomplete_path" events attached to the "change" event on the field. However, they are in the wrong order, so the form is submitted to AJAX before AC updates the value. It can also be simply reproduced in this issue queue Project field.

By the way, it also affects D8, so let's fix it there, I'm working on it

I'll submit this patch for review, but I'm not sure if this solution is right. Maybe someone can jump in and point a better direction.

The issue is in the "blur" event, autocomplete must be attached before AJAX, so I changed the group and weight of autocomplete.js. That fixed the issue.

Thanks, SebCorbin, but the right order is to fix this in 8.x first, then backport the fix in 7.x, if applied.

That looks ok to me, the only issue I have is that autocomplete is not really a library. I'd be nice to have a real solution to that instead of just messing with the group don't have the right answer right now though.

So I believe this is slightly related to this issue.

I have an autocomplete on my website, which is for a very important feature on my site.

Once I made this feature live, users complained that when they were navigating though the auto complete with the keyboard (up/down) and found their item...then pressed "enter" to select, nothing happened.

This is understandable, since a lot of users (think laptops) don't use mice. More tech savvy users also much prefer the keyboard ( i personally haven't used a mouse in like 4+ years).

So with that said, I needed the auto complete to select when the user pressed "enter". It seems that you guys are having the same issue with "tab".

Here's my fix.

// Some related issues.
// http://drupal.org/node/1483554
// http://drupal.org/node/309088

/**
 * Handler for the "onkeydown" event.
 *
 * Overwritten from Drupal's autocomplete.js to automatically selects
 * the highlighted item if the input has the auto-submit call and the
 * user presses enter.
 */
(function ($) {
Drupal.jsAC.prototype.onkeydown = function (input, e) {
  if (!e) {
    e = window.event;
  }
  switch (e.keyCode) {
    case 13: // Enter.
      if ($(input).hasClass('auto-submit')) {
        this.hidePopup(e.keyCode);
      }
      return true;
    case 40: // down arrow.
      this.selectDown();
      return false;
    case 38: // up arrow.
      this.selectUp();
      return false;
    default: // All other keys.
      return true;
  }
};
})(jQuery);

Code was inspired from some Search API JS hacks:
#1278042: Add auto-submit for the autocompletion comment #32

Thanks franz and SebCorbin. That's a huge fix!

Re-rolled

I can confirm that the patches #12 for D8 and #6 for D7 both work and fix this issue.

Please get we get this into an upcoming release ASAP?

Committed and pushed #12 to 8.x, but I'm not really comfortable committing the 7.x fix myself. Leaving for David (it's in #6 and still applies).

I think we should try for the real solution if at all possible. Moving around the order in which the JS files are executed has the potential to break other things, so for Drupal 7 it would be good to do it only as a last resort.

Here's a patch that worked for me (tested in Firefox and Chrome). It is similar to @j0rd's code in #9 (although in my testing there was no need to modify anything with the Enter key; only Tab wasn't working correctly).

If this approach makes sense, we could get it into Drupal 8 also and remove the code that pretends autocomplete is a library.

I'm using chome/linux if perhaps that makes a difference for the "enter" key, if anyone was curious.

15: 1483554-autocomplete-conflicts-ajax-blur-15.patch queued for re-testing.