Added modules for stopping event propagation
This adds `StopPropagation` modules that will stop the propagation of the most common events from the selection and dropdown containers. These modules work from a list of 21 common events, most of which were stopped by default in past versions, and call `stopPropagation` on them when they are detected at the container level. These modules are only available in full builds of Select2. This closes https://github.com/select2/select2/issues/2033. This closes https://github.com/select2/select2/issues/2974.
This commit is contained in:
Kevin Brown
parent
9d4ec4f85b
commit
8f8140e3b0
@ -16,7 +16,10 @@ module.exports = function (grunt) {
|
||||
'select2/compat/initSelection',
|
||||
'select2/compat/query',
|
||||
|
||||
'select2/dropdown/attachContainer'
|
||||
'select2/dropdown/attachContainer',
|
||||
'select2/dropdown/stopPropagation',
|
||||
|
||||
'select2/selection/stopPropagation'
|
||||
].concat(includes);
|
||||
|
||||
var i18nModules = [];
|
||||
|
||||
78
dist/js/select2.amd.full.js
vendored
78
dist/js/select2.amd.full.js
vendored
@ -4961,6 +4961,84 @@ define('select2/dropdown/attachContainer',[
|
||||
return AttachContainer;
|
||||
});
|
||||
|
||||
define('select2/dropdown/stopPropagation',[
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
|
||||
define('select2/selection/stopPropagation',[
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$selection.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
|
||||
define('jquery.select2',[
|
||||
'jquery',
|
||||
'./select2/core',
|
||||
|
||||
78
dist/js/select2.full.js
vendored
78
dist/js/select2.full.js
vendored
@ -5399,6 +5399,84 @@ define('select2/dropdown/attachContainer',[
|
||||
return AttachContainer;
|
||||
});
|
||||
|
||||
define('select2/dropdown/stopPropagation',[
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
|
||||
define('select2/selection/stopPropagation',[
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$selection.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
|
||||
define('jquery.select2',[
|
||||
'jquery',
|
||||
'./select2/core',
|
||||
|
||||
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
38
src/js/select2/dropdown/stopPropagation.js
vendored
Normal file
38
src/js/select2/dropdown/stopPropagation.js
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
define([
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$dropdown.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
38
src/js/select2/selection/stopPropagation.js
vendored
Normal file
38
src/js/select2/selection/stopPropagation.js
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
define([
|
||||
|
||||
], function () {
|
||||
function StopPropagation () { }
|
||||
|
||||
StopPropagation.prototype.bind = function (decorated, container, $container) {
|
||||
decorated.call(this, container, $container);
|
||||
|
||||
var stoppedEvents = [
|
||||
'blur',
|
||||
'change',
|
||||
'click',
|
||||
'dblclick',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'input',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'mousedown',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseup',
|
||||
'search',
|
||||
'touchend',
|
||||
'touchstart'
|
||||
];
|
||||
|
||||
this.$selection.on(stoppedEvents.join(' '), function (evt) {
|
||||
evt.stopPropagation();
|
||||
});
|
||||
};
|
||||
|
||||
return StopPropagation;
|
||||
});
|
||||
33
tests/dropdown/stopPropagation-tests.js
Normal file
33
tests/dropdown/stopPropagation-tests.js
Normal file
@ -0,0 +1,33 @@
|
||||
module('Dropdown - Stoping event propagation');
|
||||
|
||||
var Dropdown = require('select2/dropdown');
|
||||
var StopPropagation = require('select2/dropdown/stopPropagation');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var CustomDropdown = Utils.Decorate(Dropdown, StopPropagation);
|
||||
|
||||
var options = new Options();
|
||||
|
||||
test('click event does not propagate', function (assert) {
|
||||
expect(1);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var dropdown = new CustomDropdown($('#qunit-fixture select'), options);
|
||||
|
||||
var $dropdown = dropdown.render();
|
||||
dropdown.bind(container, $container);
|
||||
|
||||
$container.append($dropdown);
|
||||
$container.on('click', function () {
|
||||
assert.ok(false, 'The click event should have been stopped');
|
||||
});
|
||||
|
||||
$dropdown.trigger('click');
|
||||
|
||||
assert.ok(true, 'Something went wrong if this failed');
|
||||
});
|
||||
23
tests/dropdown/stopPropagation.html
Normal file
23
tests/dropdown/stopPropagation.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../vendor/qunit-1.14.0.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture">
|
||||
<div class="event-container">
|
||||
<select></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../vendor/qunit-1.14.0.js" type="text/javascript"></script>
|
||||
<script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>
|
||||
<script src="../../dist/js/select2.full.js" type="text/javascript"></script>
|
||||
|
||||
<script src="../helpers.js" type="text/javascript"></script>
|
||||
|
||||
<script src="stopPropagation-tests.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
33
tests/selection/stopPropagation-tests.js
Normal file
33
tests/selection/stopPropagation-tests.js
Normal file
@ -0,0 +1,33 @@
|
||||
module('Selection containers - Stoping event propagation');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
var StopPropagation = require('select2/selection/stopPropagation');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var CutomSelection = Utils.Decorate(SingleSelection, StopPropagation);
|
||||
|
||||
var options = new Options();
|
||||
|
||||
test('click event does not propagate', function (assert) {
|
||||
expect(1);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var selection = new CutomSelection($('#qunit-fixture select'), options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
$container.append($selection);
|
||||
$container.on('click', function () {
|
||||
assert.ok(false, 'The click event should have been stopped');
|
||||
});
|
||||
|
||||
$selection.trigger('click');
|
||||
|
||||
assert.ok(true, 'Something went wrong if this failed');
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user