-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 #2033. This closes #2974.
- Loading branch information
1 parent
9d4ec4f
commit 8f8140e
Showing
9 changed files
with
326 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| }); |