component stays open after clicking on a native select in IE. fixes select2#1356

Author: ivaynberg

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;

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();