In autocomplete textfield, have to hit enter once to accept autocomplete, another time to submit form

for the second part I would recommend you to read some of these
http://drupal.org/project/issues?text="HTTP+Error+0"&order=comment_count&sort=desc

for the first part I would say a better title would help, also tagging this issue appropriately

EDIT: link fixed

I didn't meant to change the addressed component
(don't know how did it happen while editing, it seems that the "usability" component is no longer available)

what the heck?
I swear I haven't touched dropdowns

can't set it back to usability, then lets at least leave it on ajax system

@Carlitus: Your second issue is a duplicate of #634628: AJAX "HTTP Error 0" when AJAX operation is interrupted.. Yes, this has been a problem for a long time.

I don't understand the first issue, so am marking this "postponed, maintainer needs more info" Please explain in detail what the issue is that you have found, with an example.

Are you saying that:

If you type the full entry in an autocomplete textfield, you still have to hit return twice (once to accept the autocomplete, and once to trigger the form? That annoys me too. I'd love to have a solution to it. If I type in the full value of what I want in the textfield, I shouldn't have to wait for a second <enter>.

but if it is free tagging you might still enter a comma and use the autocompletion again, hit enter for the second tag and yet the form doesn't have to be submitted
as far as I understood, that would be valid if it was about a single tag autocompletion, right?

OK, I still don't completely understand this issue.

Please give step-by-step instructions on how to recreate it. Use the formula suggested when creating an issue:

If you are reporting a bug, it needs to consist of three things:

* What are the steps required to reproduce the bug? (Use an actual example, please)
* What behavior were you expecting?
* What happened instead?

Please include as much information as you can: OS, webserver name and version, PHP version, Drupal version, Drupal path, and everything else you might feel is relevant. There is no such thing as a bug report that is too detailed.

If you are submitting a feature request, please review the criteria for evaluating proposed changes.

as well as what browser are you using
note that often browsers trigger their own autocompletion

I think that Randy describes the problem in #6 pretty well.
What Carlitus is saying is that when you use an autocomplete field for something like multiple term selection of a taxomony, it makes sense to press enter to select each one of them and then press enter again for submitting the form. It would be very annoying if you pressed enter and the form got submitted and what you wanted to do is add an extra term. So in "multiple selection" autocomplete texfields, this behavior is ok.
However, when you need to select just one element (for example, the search of api.drupal.org), it would be better to hit enter only once.

subscribe

subscribe

This behaviour is indeed a bit unconfortable. In most situations you want to hit just one time the enter button, to both select the element and submit a form (like for example in http://api.drupal.org/ search form). Two clicks is confusing for the user.

Are there any news about this issue?

It would be very annoying if you pressed enter and the form got submitted and what you wanted to do is add an extra term.

also, the form might have more elements (besides the autocomplete)

to both select the element and submit a form

when it is a single term selection AND it is the only element in the form, yes, it makes sense,
but otherwise it would be an early (WTF) submission

I have found a similar issue with the tab key, which I believe illuminates what's going on with the enter key as well.

In my particular case, I have attached an #ajax behavior, triggered on blur, to a taxonomy term field to refresh portions of the form when a new term is selected. However, the term field also has an autocomplete behavior on it. Here's what happens:

When I type part of a word, get the autocomplete dropdown, and click on the appropriate value with a mouse:
1) Drupal.jsAC.select() is triggered, setting the text field to the value I have chosen.
2) onblur is triggered, submitting the form through AJAX with the selected value.

When I type part of a word, get the autocomplete dropdown, select the appropriate value with the down key and press the tab key to select it:
1) onblur is triggered, submitting the form through AJAX with my typed value rather than the selected value.
2) onkeyup is triggered, setting the text field to the value I have chosen and hiding the popup.

I have seen this behavior on both Chrome and Firefox.

It seems that the problem is that most browsers trigger the tab key's default blur event, to move the focus to the next form element, at the beginning of the key stroke (keydown) rather than at the end (keyup).

This can be resolved by moving the key handling code for the tab character (9) to the Drupal.jsAC.prototype.onkeydown() rather than Drupal.jsAC.prototype.onkeyup(). There should be no downside to moving the enter (13) and esc (27) characters as well, and doing so will probably resolve the issue above, where the enter key must be pressed twice.

No, that patch does not solve the issue for me.

I've fixed this problem, but I needed to change the core file misc/autocomplete.js :(

Steps to do:

1. change function code

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();
};

into:

    Drupal.jsAC.prototype.hidePopup = function (keycode) {
        var submit = false;

        // Select item if the right key or mousebutton was pressed.
        if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
            this.input.value = $(this.selected).data('autocompleteValue');
            submit =  13 == keycode && $(this.input).hasClass('auto_submit');
        }
        // Hide popup.
        var popup = this.popup;
        if (popup) {
            this.popup = null;
            $(popup).fadeOut('fast', function () { $(popup).remove(); });
        }
        this.selected = false;
        $(this.ariaLive).empty();

        if (submit) {
            this.input.form.submit();
        }
    };

2. Add to your form item '#attributes' => array('class'=> array('auto_submit')),

Greetings
marukas

I have an issue with auto-complete widget and ajax framework for the forms, if I create a from with #ajax for the submit, and in the textfield search for something and the auto-complete suggestions popped-up I click on it after override the the function in misc/autocomplete.js

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
}; 

to this :

 Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
  if(jQuery(this.input).hasClass('auto_submit')){
      this.input.form.submit();
  }
};

and adding 'auto_submit' class to the textfield,

<?php
 ...
  '#attributes' => array('class'=> array('auto_submit')),
 ...
?>

this will refresh the whole page, just like it's a normal form but without any result, after some research for this issue I found that drupal ajax framework using the ajaxFrom jquery plugin to handle the form submit with ajax so I added some changes to the code above to make it look like this :

  /**
   * Puts the currently highlighted suggestion into the autocomplete field.
   */
  Drupal.jsAC.prototype.select = function (node) {
    //@TODO : find a better way to do the ajax request on select the auto-complete 
    this.input.value = $(node).data('autocompleteValue');
    
    if(jQuery(this.input).hasClass('auto_submit')) {
      if(jQuery(this.input.form).hasClass('ajax-processed')) {
        var options = {
        dataType : 'script', 
        url : Drupal.settings.basePath + 'system/ajax',
        type : 'POST',
        data : {_triggering_element_name : "op", _triggering_element_value : ''}
    };
    $(this.input.form).ajaxSubmit(options); 
   } else {
     this.input.form.submit();
   }
   //return false to prevent normal browser submit and page navigation
   return false;
   }
 };

I hope this will help, and the attached is a patch for misc/autocomplete.js please, if there is a better way to implement this just fix it and send a patch.

#19 works, but it's a corehack..

you can just override Drupal.jsAC.prototype.select function in your theme js file, this is just an issue to solve this required functionality in the future, and make it in the core.

I think this is a major issue - Added my comment in the module thread here:

http://drupal.org/node/1278042#comment-6171862

I have a custom "Associate or Create" widget on my nodes, which is a central feature to my entire website.

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".

Additionally, there's an issue with autocomplete where when ajax is triggered via blur() doesn't send the keycode to onkeyup, so I've used onkeydown.

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

These 3 lines helped me:

--- misc/autocomplete.js
+++ misc/autocomplete.js
@@ -96,6 +96,9 @@
     case 13: // Enter.
     case 27: // Esc.
       this.hidePopup(e.keyCode);
+      if (13 == e.keyCode && $(input).hasClass('auto_submit')) {
+        input.form.submit();
+      }
       return true;
 
     default: // All other keys.

+ adding class 'auto_submit' to my autocomplete input.

I can submit the patch for #19, but does anyone know of a way to solve this in the meantime (without hacking core)? I tried to override the function at the theme level without success.

Brandy, I solved it in the theme level by doing the following:

1. Create a JS file in the theme to store the override code. I called mine THEME.keyup.js and include in the theme's .info file

2. Use the following in THEME.keyup.js:

(function($, Drupal, window, document, undefined) {

  /**
   * Handler for the "keyup" 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.
   * related issue: https://www.drupal.org/node/309088
   * 
   */
  Drupal.jsAC.prototype.onkeyup = function (input, e) {
    if (!e) {
      e = window.event;
    }
    switch (e.keyCode) {
      case 16: // Shift.
      case 17: // Ctrl.
      case 18: // Alt.
      case 20: // Caps lock.
      case 33: // Page up.
      case 34: // Page down.
      case 35: // End.
      case 36: // Home.
      case 37: // Left arrow.
      case 38: // Up arrow.
      case 39: // Right arrow.
      case 40: // Down arrow.
        return true;

      case 9:  // Tab.
      case 13: // Enter.
      case 27: // Esc.
        this.hidePopup(e.keyCode);
        if (13 == e.keyCode && $(input).hasClass('auto_submit')) {
          input.form.submit();
        }
        return true;

      default: // All other keys.
        if (input.value.length > 0 && !input.readOnly) {
          this.populatePopup();
        }
        else {
          this.hidePopup(e.keyCode);
        }
        return true;
    }
  };

})(jQuery, Drupal, this, this.document);

3. Add 'auto_submit' class to the field. Example:

  $form['something_widget']['field'] = array(
    '#type' => 'textfield',
    '#title' => t('Title text'),
    '#autocomplete_path' => 'ajax/autocomplete/path',
    '#attributes' => array(
      'class' => array('auto_submit'),
    ),
  );

I've tried a few of the suggestions in this thread (#19, #24 and #27), but the only one that seems to be working for me is #25. Frustrating to have to keep coming back to this after every core upgrade...

@BBC I know that is frustrating. But, working together, the community can get it done. In order to get this solved, someone must upload a patch and mark it "Needs review". If it passes automated tests, someone else must provide a peer review and mark it "Reviewed & tested by the community". It will not be solved any other way.

This is #25 by @dberror as a patch.

Having same question as#9, please update Summary with step-by-step instructions on how to recreate it.

Also, I can't find `.auto_submit` class in Drupal Core. It should be address in contribute modules

Hi all! Just curious, will #31 be rolled into core, or probably not, or? And if help is needed, may I help somehow?

Thank you!

[EDIT: Still applies fine against 7.55, fwiw]

Can i suggest instead of "auto_submit", we use "form-autocomplete"? This doesnt require adding classes to form elements as the autocomplete class is added by core.

Rolling back my previous comment, this looks to be a better solution that provides the best UX. When selecting something either by mouse click or keyboard enter, the auto-submit class will submit the form.

Fixing root path.

Setting to needs review after successful tests.

#38 Works for me!

#31 and #39 work for me.

I combined both patches so we can have the issue with the enter key not submitting the form when the autocomplete pops up fixed and automatically submitting the form when selecting one of the autocomplete options. This works for autocomplete forms after adding the 'auto-submit' class to them.

This solution is not only for 2 enters, but simply for cases where you want the form to submit automatically once you select an option.
There are multiple problem with this, though.
In my case, being updated to the latest version on views, I got in infinite loop in js.
The root cause was https://www.drupal.org/project/views/issues/1264794

My loop was larger, reaching 2 custom code places and also better_exposed_filters.js,
but in theory, this could happen anywhere since ajax_view.js now triggers autocompleteSubmit again,
which calls Drupal.jsAC.prototype.hidePopup, which in turn calls Drupal.jsAC.prototype.select.

The solution in my case was to let Drupal.jsAC.prototype.hidePopup finish it's job before triggering a submit.
Something like this:

    Drupal.jsAC.prototype.select = function (node) {
      this.input.value = $(node).data('autocompleteValue');
      $(this.input).trigger('autocompleteSelect', [node]);

      // --- Original code moved from Drupal.jsAC.prototype.hidePopup in autocomplete.js
      // in order to complete the hidePopup process and prevent an infinite js loop.
      // Hide popup.
      var popup = this.popup;
      if (popup) {
        this.popup = null;
        $(popup).fadeOut('fast', function () { $(popup).remove(); });
      }
      this.selected = false;
      $(this.ariaLive).empty();
      // --- End moved code.
      // Trigger the submit.
      this.input.form.submit();
    }

And in my case this was still not enough, since this.input.form.submit(); won't work for ajax forms.
What can work is triggering a click on the submit button or doing a manual ajax submit:
http://artofeclipse.com/2011/12/create-auto-complete-with-ajax-form-in-d...

Good luck!

@jOpdebeeck Please do not set your own patch as RTBC. According to the #45, this needs an additional work to prevent unexpected behavior.

Also I do not think we can mix these two patches here (#31 and #39). Submit after the enter key is pressed is a bit different from the auto-submit when the item from the autocomplete is selected. The second one clearly should be a Feature request. The first one is questionable.

Missed one tag.