Hello and thanks a lot for this great great and very flexible module.

Today I'd like to discuss a problem that lead to usability problems in several Drupal 7 projects already (and this is why I'm categorizing this as 'Bug report' and not as 'Feature request').

The autocomplete widget is nice, but additionally to other usability problems which already have their own issues, the ENTER keydown behaviour is not very nice and hard to understand for normal users.

How to reproduce the usability problem:

Enter a value (in my case from an entity reference views results filter) into the ER autocomplete field, e.g. "401"
When the select list appears do NOT click on a value and do NOT click arrow down but press ENTER directly. A user would do this if he entered a value that is exactly the same as in the list, e.g. "401"
Now the value "401" seems to be selected correctly but it is not, because the ID part is missing ("401 (123)")
Form validation fails and other fields (in my case from entityreference_autofill) don't work correctly.

A clever workaround?

One of the long-term reasons for this problems is, that the ID in the brackets is required, so that entering the same value as the correct result is not enough.
But hey, the first value is in most cases exactly what the user was searching for. So why don't we simply select the first result value on enter click, if there is at least one matching entry (or perhaps EXACTLY one?)

In our usability tests this improved the understanding a lot. And if the user presses enter before there are selectable results we trigger an alert.

The key point is: This all is possible with the current implementation of entityreference autocomplete widget without any further technical problems or drawbacks.

Perhaps one day the entityreference autocomplete might become better at all but until this we should have a look how we can improve usability.

Here's my JS implementation that can be added by a custom module in hook_init or could be directly patched into entityreference if we can get enough positive feedback!

/**
 * Implements hook_init.
 */
function MY_MODULE_init() {
  drupal_add_js("(function($) {
  'use strict';
  Drupal.behaviors.entityreference_betterEnterBehavior = {
    attach: function(context, settings) {
      $('input.form-autocomplete', context).once('drowl-customer-entityreference-betterenterbehavior', function() {
        $(this).keypress(function(e) {
          if (e.keyCode == 13) {
          var ac = $(this).siblings('#autocomplete');
            if (typeof ac.get(0) != 'undefined' && ac.children().length > 0) {
              ac.each(function() {
                this.owner.selectDown();
                this.owner.select();
                this.owner.hidePopup();
              });
              $(this).trigger('blur');              
            } else {
              alert(Drupal.t('Choose a valid value from the result list.'));
            }
            e.preventDefault();
            return false;
          }
        });
        
      });
    }
  };
}(jQuery));", array('type' => 'inline'));
}

Note: The idea is based on this discussion: http://drupal.stackexchange.com/questions/87439/drupal-7-disable-submit-...

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Anybody created an issue. See original summary.

AdamB’s picture

I've had clients describing this same issue. It would be nice to patch the module as described above.

AdamB’s picture

Status: Active » Needs review
FileSize
1.39 KB

I've created a patch for this for entity reference & tested against projects using entity reference.

Status: Needs review » Needs work

The last submitted patch, 3: improve_the_enter-2571107-3.patch, failed testing.

Anybody’s picture

In the meantime I improved the code from above:

/**
 * Implements hook_init.
 */
function MY_MODULE_init() {
  drupal_add_js("(function ($) {
  'use strict';
  Drupal.behaviors.ACChangeEnterBehavior = {
    attach: function (context, settings) {
      $('input.form-autocomplete', context).once('ac-change-enter-behavior', function() {
      $(this).keypress(function(e) {
        var ac = $('#autocomplete');
        if (e.keyCode == 13 && typeof ac[0] != 'undefined') {
          e.preventDefault();
          ac.each(function () {
              if(this.owner.selected == false){
	              this.owner.selectDown();
	            }
              this.owner.hidePopup();
          });
          $(this).trigger('change');
        }
      });
    });
    }
  };}(jQuery));", array('type' => 'inline'));
}

(see http://julian.pustkuchen.com/node/740)

Anybody’s picture

In the meantime I improved the code from above:

/**
 * Implements hook_init.
 */
function MY_MODULE_init() {
  drupal_add_js("(function ($) {
  'use strict';
  Drupal.behaviors.ACChangeEnterBehavior = {
    attach: function (context, settings) {
      $('input.form-autocomplete', context).once('ac-change-enter-behavior', function() {
      $(this).keypress(function(e) {
        var ac = $('#autocomplete');
        if (e.keyCode == 13 && typeof ac[0] != 'undefined') {
          e.preventDefault();
          ac.each(function () {
              if(this.owner.selected == false){
	              this.owner.selectDown();
	            }
              this.owner.hidePopup();
          });
          $(this).trigger('change');
        }
      });
    });
    }
  };}(jQuery));", array('type' => 'inline'));
}

(see http://julian.pustkuchen.com/node/740)

LiamPower’s picture

FileSize
344 bytes

I've created a patch using the code from #6 which I can confirm is working well for me.

LiamPower’s picture

Patch didn't pick up the new js file. Here it is again

LiamPower’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 8: improve_the_enter-2571107-8.patch, failed testing.

mitchellresnick’s picture

Subscribe, I'm also having the same issue. I hope you guys can figure it out - it's a much needed feature.
Thanks for the work you've put in so far!

LiamPower’s picture

To be fair the patch I generated applies cleanly using a drush make file, but the test which is being run thinks the JS file doesn't exist. It may be worth someone reviewing the automated tests as well.

Anybody’s picture

Confirming the code in #8 works fine and as expected!

  • joseph.olstad committed af590dd5 on 7.x-1.x authored by AdamB
    Issue #2571107 by LiamPower, AdamB, Anybody, mitchellresnick: Improve...
joseph.olstad’s picture

Status: Needs work » Fixed
Anybody’s picture

Whao, that went fast @joseph.olstad!! Thank you! :D

Would you be so kind to credit me for the issue and proposed solution? (8 years ago...)

joseph.olstad’s picture

@Anybody, you got credited twice now, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

joseph.olstad’s picture