Added support for a click mask
In past versions of Select2, a mask was used to detect clicks outside of the dropdown. While this works with high accuracy, and avoid many of the click issues we had with modals, it is no longer the default close handler for Select2. It blocks any features on the container from working without a second click, and introduces odd edge cases that we cannot easily handle.
This commit is contained in:
parent
1ca71578d4
commit
f0017c024d
17
dist/css/select2.css
vendored
17
dist/css/select2.css
vendored
@ -87,6 +87,23 @@
|
||||
.select2-search--dropdown .select2-search--hide {
|
||||
display: none; }
|
||||
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
filter: alpha(opacity=0); }
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
|
2
dist/css/select2.min.css
vendored
2
dist/css/select2.min.css
vendored
File diff suppressed because one or more lines are too long
5
dist/js/select2.amd.full.js
vendored
5
dist/js/select2.amd.full.js
vendored
@ -3709,9 +3709,12 @@ define('select2/dropdown/attachContainer',[
|
||||
}
|
||||
|
||||
AttachContainer.prototype.position =
|
||||
function (decorated, $container, $dropdown) {
|
||||
function (decorated, $dropdown, $container) {
|
||||
var $dropdownContainer = $container.find('.dropdown-wrapper');
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
$dropdown.addClass('select2-dropdown--below');
|
||||
$container.addClass('select2-container--below');
|
||||
};
|
||||
|
||||
return AttachContainer;
|
||||
|
5
dist/js/select2.full.js
vendored
5
dist/js/select2.full.js
vendored
@ -13244,9 +13244,12 @@ define('select2/dropdown/attachContainer',[
|
||||
}
|
||||
|
||||
AttachContainer.prototype.position =
|
||||
function (decorated, $container, $dropdown) {
|
||||
function (decorated, $dropdown, $container) {
|
||||
var $dropdownContainer = $container.find('.dropdown-wrapper');
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
$dropdown.addClass('select2-dropdown--below');
|
||||
$container.addClass('select2-container--below');
|
||||
};
|
||||
|
||||
return AttachContainer;
|
||||
|
2
dist/js/select2.full.min.js
vendored
2
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
5
src/js/select2/dropdown/attachContainer.js
vendored
5
src/js/select2/dropdown/attachContainer.js
vendored
@ -6,9 +6,12 @@ define([
|
||||
}
|
||||
|
||||
AttachContainer.prototype.position =
|
||||
function (decorated, $container, $dropdown) {
|
||||
function (decorated, $dropdown, $container) {
|
||||
var $dropdownContainer = $container.find('.dropdown-wrapper');
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
$dropdown.addClass('select2-dropdown--below');
|
||||
$container.addClass('select2-container--below');
|
||||
};
|
||||
|
||||
return AttachContainer;
|
||||
|
29
src/js/select2/selection/clickMask.js
vendored
Normal file
29
src/js/select2/selection/clickMask.js
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
define([
|
||||
'jquery'
|
||||
], function ($) {
|
||||
function ClickMask () { }
|
||||
|
||||
ClickMask.prototype.bind = function (decorate, $container, container) {
|
||||
var self = this;
|
||||
|
||||
decorate.call(this, $container, container);
|
||||
|
||||
this.$mask = $(
|
||||
'<div class="select2-close-mask"></div>'
|
||||
);
|
||||
|
||||
this.$mask.on('mousedown touchstart click', function () {
|
||||
self.trigger('close');
|
||||
});
|
||||
};
|
||||
|
||||
ClickMask.prototype._attachCloseHandler = function (decorate, container) {
|
||||
$(document.body).append(this.$mask);
|
||||
};
|
||||
|
||||
ClickMask.prototype._detachCloseHandler = function (deocrate, container) {
|
||||
this.$mask.detach();
|
||||
};
|
||||
|
||||
return ClickMask;
|
||||
});
|
@ -12,5 +12,26 @@
|
||||
|
||||
@import "dropdown";
|
||||
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
|
||||
// styles required for IE to work
|
||||
|
||||
background-color: #fff;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
@import "theme/default/layout";
|
||||
@import "theme/classic/layout";
|
||||
|
Loading…
x
Reference in New Issue
Block a user