Steps to reproduce:

  1. Display a nodereference field that uses autocomplete widget as an editable field. It can be on a node page or in a view.
  2. Place your cursor in the field and enter some data so that the autocomplete dropdown returns some results, use the up/down arrow keys on your keyboard to highlight a result, then press your [Enter] key to select the result.

You will see that the autocomplete field returns this error:

error : [Node Type]: found no valid post with that title. 

However, highlighting the result with your mouse and left-clicking the desired result works as expected and does not return an error.

I have a hunch that this has something to do with the [Enter] key triggering node_save on the editable field before the autocomplete result has a chance to populate the field. I would love to submit a patch if I had js skills. But I don't (weeeak) so all I can do is file this report.

Comments

gthing’s picture

I have the same problem. Enter key should pretty much do nothing on an autocomplete field, except maybe select the top result.

valllabh’s picture

This problem is due to Drupal's auto-complete.

If you check update ajax request, it sends value typed by user and not the selected one from auto-complete.
It means input field's change event is getting triggered before auto-complete updates selected value to the input field.
Enter key triggers change event.

Its kind of little hack ;) but It worked for me :P

I tweaked misc/autocomplete.js

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.autocompleteValue;
	$(this.input).trigger('change');
  }
  // Hide popup
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function() { $(popup).remove(); });
  }
  this.selected = false;
};

Drupal.jsAC.prototype.onkeydown = function (input, e) {
  if (!e) {
    e = window.event;
  }
  switch (e.keyCode) {
    case 40: // down arrow
      this.selectDown();
      return false;
    case 38: // up arrow
      this.selectUp();
      return false;
    case 13: // enter
      this.hidePopup(13);
      return false;
    default: // all other keys
      return true;
  }
};
ymeiner’s picture

Instead of being depended on another module's good will and without assuming that all modules are created equal and every programmer is doing his best to fit the code to every other module, here is my solution that involves defensive programming with changes in editablefields.js that solves the [enter] issues. (thank you #2 for the idea)

(This is js for whoever did not understand it)

Drupal.behaviors.editablefields_submit = {
  attach: function (context) {
    $('.editablefield-item').once('editablefield', function() {
      var $this = $(this);

      // There is only one editable field in that form, we can hide the submit
      // button.
      if ($this.find('input[type=text],textarea,select').length == 1) {
        $this.find('input.form-submit').hide();
        $this.find('input[type=text],textarea,select').change(function() {
             $this.find('input.form-submit').triggerHandler('click');
        });
        //This is the part that I added and it resolves the enter only. 
        //If you have a problem with other key, resolve it by adding another case to the switch.
	$this.find('input[type=text],textarea,select').keydown(function(event){
		switch (event.keyCode) {
			case 13: // enter
				var popup = this.popup;  
				if (popup) {
					this.popup = null;
					$(popup).remove();
				}
				this.selected = false;
				$(this.ariaLive).empty();
				$this.find('input.form-submit').triggerHandler('click');
		        	return false;
			default: // all other keys
			        return true;
		}
	});
      }
    });
  }
};
gthing’s picture

Could this be implemented as a new module?

ymeiner’s picture

you have some options here:

1. rewrite the existing module and replace the code in the js file.
2. put this code in your theme js file.

to write a module just for a js file seams to me like unnecessary work.

Abelito’s picture

Issue summary: View changes

Adding this code to editablefields.js works for me in Drupal 7.

Drupal.jsAC.prototype.onkeydown = function (input, e) {
  if (!e) {
    e = window.event;
  }
  switch (e.keyCode) {
    case 40: // down arrow
      this.selectDown();
      return false;
    case 38: // up arrow
      this.selectUp();
      return false;
    case 13: // enter
      this.hidePopup(13);
      return false;
    default: // all other keys
      return true;
  }
};
joelpittet’s picture

Status: Active » Closed (outdated)

Closing this to triage the queue. Feel free to comment if you'd like this to be re-opened, though currently there is nobody supporting the 6.x branch.