| Project: | Drupal core |
| Version: | 6.14 |
| Component: | base system |
| Category: | task |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | patch (to be ported) |
Issue Summary
When using IE6, autocomplete.js:
http://cvs.drupal.org/viewcvs/drupal/drupal/misc/autocomplete.js
doesn't hide SELECT elements when the autocomplete popup displays. The user is able to see the first item in the popup autocomplete box but items 2, 3, and 4 are hidden. The problem gets worse if the SELECT box is a multiline select box in which case items 2, 3, 4, etc. are hidden. An example of a page layout where this occurs is if you have an autocomplete textbox to add an item to the list and a multiline SELECT element showing already existing items in the list:
Enter name (autocomplet):
Existing Names:
A brute force solution would be to hide all SELECT elements on the page when a popup window pops up. A beter solution would be to let the user specify which elements should be hidden when the popup is dispalyed.
An even better solution is to calculate which SELECT boxes the popup window is going to appear over and hide just those elements. This is what the jscalendar componenet does. When this page is viewed in IE6 and a popup calendar is activated and moved over SELET elements, the SELECT elements are automatically hidden:
Comments
#1
This is an old and nasty IE6 (and below) bug. Form elements are outside of the DOM's flow, and are always the top most elements. Z-index won't help.
See this issue for NiceMenus module: http://drupal.org/node/141135 for a quite hack-ish workaround. I wonder if this could/should be used in core though.
#2
The user experience project is closing so this issue is being moved to the usability component under the Drupal project
#3
Sorry, but we cannot fix all madness in IE6.
#4
//edit
Wrong post
#5
Here is the patch file to the posted code above.
Just apply the patch to the root of your Drupal installation
#6
for some reason the patch file was not uploaded and i can not replace it. so here it is again
#7
quick fix for Drupal autocomplete.js,v 1.23 and higher
Autocomplete History: http://drupalcode.org/viewvc/drupal/drupal/misc/autocomplete.js?view=log
Search for "#node-form" and replace the div hierarchy.
/*** Hides the autocomplete suggestions
*/
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;
}
// Hide popup
var popup = this.popup;
if (popup) {
this.popup = null;
$(popup).fadeOut('fast', function() { $(popup).remove(); });
/* IE6 fix */
if($.browser.msie && parseInt(jQuery.browser.version) == 6)
{
$(".form-select", $("#node-form")).css({ visibility: "visible" });
}
/* IE6 fix End */
}
this.selected = false;
};
/**
* Fills the suggestion popup with any matches received
*/
Drupal.jsAC.prototype.found = function (matches) {
// If no value in the textfield, do not show the popup.
if (!this.input.value.length) {
return false;
}
// Prepare matches
var ul = document.createElement('ul');
var ac = this;
for (key in matches) {
var li = document.createElement('li');
$(li)
.html('<div>'+ matches[key] +'</div>')
.mousedown(function () { ac.select(this); })
.mouseover(function () { ac.highlight(this); })
.mouseout(function () { ac.unhighlight(this); });
li.autocompleteValue = key;
$(ul).append(li);
}
// Show popup with matches, if any
if (this.popup) {
if (ul.childNodes.length > 0) {
$(this.popup).empty().append(ul).show();
/* IE6 fix */
if($.browser.msie && parseInt(jQuery.browser.version) == 6)
{
$(".form-select", $("#node-form")).css({ visibility: "hidden" });
}
/* IE6 fix End */
}
else {
$(this.popup).css({visibility: 'hidden'});
this.hidePopup();
}
}
};