From a4a3eedd51f0379b15e8f650bcc91982c64c37f4 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Fri, 31 May 2013 17:57:21 -0700 Subject: [PATCH] component stays open after clicking on a native select in IE. fixes #1356 --- select2.css | 15 +++++++++++++++ select2.js | 35 +++++++++++++++++++++++++++++++---- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/select2.css b/select2.css index 0592d64a..231bda10 100644 --- a/select2.css +++ b/select2.css @@ -124,7 +124,22 @@ Version: @@ver@@ Timestamp: @@timestamp@@ cursor: pointer; } +.select2-drop-undermask { + border: 0; + margin: 0; + padding: 0; + position: absolute; + left: 0; + top: 0; + z-index: 9998; + background-color: transparent; + filter: alpha(opacity=0); +} + .select2-drop-mask { + border: 0; + margin: 0; + padding: 0; position: absolute; left: 0; top: 0; diff --git a/select2.js b/select2.js index 64e5f755..68b16a15 100644 --- a/select2.js +++ b/select2.js @@ -1202,7 +1202,7 @@ the specific language governing permissions and limitations under the Apache Lic scroll = "scroll." + cid, resize = "resize."+cid, orient = "orientationchange."+cid, - mask; + mask, undermask = undefined, maskCss; this.container.addClass("select2-dropdown-open").addClass("select2-container-active"); @@ -1233,18 +1233,42 @@ the specific language governing permissions and limitations under the Apache Lic }); } + // ie requires an iframe shim to cover controls like selects + if($.browser.msie) { + undermask=$("#select2-drop-undermask"); + if (undermask.length==0) { + undermask = $(document.createElement("iframe")); + undermask.attr("src","about:blank"); + undermask.attr("id","select2-drop-undermask").attr("class","select2-drop-undermask"); + undermask.attr("allowTransparency", "true"); + undermask.attr("frameborder", "0"); + undermask.hide(); + undermask.appendTo(this.body()); + } + } + + // ensure the mask is always right before the dropdown if (this.dropdown.prev()[0] !== mask[0]) { this.dropdown.before(mask); } + // ensure the undermask is always right before the mask + if (undermask && mask.prev()[0] !== undermask[0]) { + mask.before(undermask); + } + // move the global id to the correct dropdown $("#select2-drop").removeAttr("id"); this.dropdown.attr("id", "select2-drop"); // show the elements - mask.css(_makeMaskCss()); - mask.show(); + maskCss=_makeMaskCss(); + + if (undermask) { undermask.css(maskCss).show(); } + + mask.css(maskCss).show(); + this.dropdown.show(); this.positionDropdown(); @@ -1256,7 +1280,9 @@ the specific language governing permissions and limitations under the Apache Lic var that = this; this.container.parents().add(window).each(function () { $(this).on(resize+" "+scroll+" "+orient, function (e) { - $("#select2-drop-mask").css(_makeMaskCss()); + var maskCss=_makeMaskCss(); + $("#select2-drop-undermask").css(maskCss); + $("#select2-drop-mask").css(maskCss); that.positionDropdown(); }); }); @@ -1283,6 +1309,7 @@ the specific language governing permissions and limitations under the Apache Lic this.clearDropdownAlignmentPreference(); + $("#select2-drop-undermask").hide(); $("#select2-drop-mask").hide(); this.dropdown.removeAttr("id"); // only the active dropdown has the select2-drop id this.dropdown.hide();