Fixed: Unable to select option in combobox in IE and Chrome

There's probably a bug regarding z-index stacking in Chrome and IE. It appears when combobox is used in dialog. Combobox's select area had z-index=1010. When first jquery dialogs is open it has z-index=1000. Further dialogs have higher z-index. When dialog's z-index exceeds 1010 option in select control can't be selected. IMO it is a browser bug because select control lies in dialog content's stacking context so it should be functional even with z-index=1.

This patch raises select area's z-index to 9000000 which should prevent the issue for some time. Also it make's combobox's z-index configurable so we can solve combobox stacking (ie in service-add dialog).

Second part of:
https://fedorahosted.org/freeipa/ticket/2834
This commit is contained in:
Petr Vobornik 2012-07-27 16:31:58 +02:00
parent 68d5fe1ec7
commit 7a2587e6a1
2 changed files with 8 additions and 7 deletions

View File

@ -1343,7 +1343,6 @@ table.scrollable tbody {
position: absolute;
left: 0;
right: 0;
z-index: 1010; /* need to be above dialog box */
}
.combobox-widget-list input {

View File

@ -2093,6 +2093,7 @@ IPA.combobox_widget = function(spec) {
that.empty_option = spec.empty_option === undefined ? true : spec.empty_option;
that.options = spec.options || [];
that.input_field_changed = IPA.observer();
that.z_index = spec.z_index ? spec.z_index + 9000000 : 9000000;
that.create = function(container) {
that.widget_create(container);
@ -2151,7 +2152,8 @@ IPA.combobox_widget = function(spec) {
}).appendTo(that.input_container);
that.list_container = $('<div/>', {
'class': 'combobox-widget-list'
'class': 'combobox-widget-list',
css: { 'z-index': that.z_index }
}).appendTo(that.input_container);
var div = $('<div/>', {
@ -2187,7 +2189,8 @@ IPA.combobox_widget = function(spec) {
name: 'list',
size: that.size,
style: 'width: 100%',
change: that.select_on_change
change: that.select_on_change,
click: that.select_on_change
}).appendTo(div);
if (that.undo) {
@ -2201,7 +2204,7 @@ IPA.combobox_widget = function(spec) {
if (!that.is_open()) return;
var value = $('option:selected', that.list).val();
var value = that.list.val();
that.input.val(value);
IPA.select_range(that.input, 0, 0);
@ -2327,10 +2330,9 @@ IPA.combobox_widget = function(spec) {
};
that.create_option = function(label, value) {
return $('<option/>', {
var option = $('<option/>', {
text: label,
value: value,
click:that.select_on_change
value: value
}).appendTo(that.list);
};