Posted by Carlitus on September 16, 2008 at 9:37am
| Project: | Drupal core |
| Version: | 7.x-dev |
| Component: | ajax system |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
The behaviour of the autocomplete when only one term (with one or more words) is needed its very odd: you need to hit the enter two times. The average user hit the enter and wait, and wait until he see one enter more is needed. It can be very frustrating.
Example: the drupal API search
I've found a very similar issue in 2007 http://drupal.org/node/171918
Futhermore, in autocomple.js there is an alert:
"alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ db.uri);"
It is useless and confusing for the average user.
Comments
#1
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
#2
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)
#3
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
#4
@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.
#5
Ummmm...my english is very poor but i'll try...
In an autocomplete when you select an option of the dropdown with the arrows of the keyboard you need to hit the enter twice. First to select the option and second to submit the form. It has sense is you need to add more than one term (in a tag input for example) but I think it is very confusing if you are in a search form (like de search form of the Drupal.org API)
#6
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>.#7
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?
#8
Yes, when the user can introduce more than one "thing" using the autocomplete it works well now. My issue it's only for when one autocomplete is needed, in a search for example.
#9
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.
#10
as well as what browser are you using
note that often browsers trigger their own autocompletion
#11
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.
#12
subscribe
#13
subscribe
#14
In the new API web page it works well now
http://api.scratch.drupal.org
#15
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?
#16
also, the form might have more elements (besides the autocomplete)
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
#17
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.
#18
No, that patch does not solve the issue for me.
#19
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
#20
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.
#21
#19 works, but it's a corehack..
#22
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.