Contrib.social

Improve the ENTER keydown behaviour of ER autocomplete

Open on Drupal.org →
Created on 18 September 2015, almost 9 years ago
Updated 14 April 2023, about 1 year ago

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

🐛 Bug report
Status

Fixed

Version

1.0

Component

User interface

Created by

🇩🇪Germany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024