From 0519a59e57278dab204ebe86f746835e3997ec45 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Fri, 26 Jul 2019 12:32:00 -0400 Subject: [PATCH 1/2] Reposition dropdown whenever items are selected This fixes an old bug where if you had a multiple select with the `closeOnSelect` option set to `false` and many options being selected, the dropdown would not reposition itself if the selected options expanded the container down another line. This was because the dropdown was only being repositioned when it was opened, closed, or if something around it was scrolled or resized. Unfortunately, in most cases none of these happened and the dropdown would start covering the selections. This was fixed by telling Select2 to resize the dropdown when new options are selected or existing options are unselected. Fixes #4377 --- src/js/select2/dropdown/attachBody.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/js/select2/dropdown/attachBody.js b/src/js/select2/dropdown/attachBody.js index 4f64fa9b67..5ea338eae7 100644 --- a/src/js/select2/dropdown/attachBody.js +++ b/src/js/select2/dropdown/attachBody.js @@ -31,6 +31,16 @@ define([ self._positionDropdown(); self._resizeDropdown(); }); + + container.on('select', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + + container.on('unselect', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); } }); From 3f75227a693c3b9d4e749480d9827e0f3db1a685 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Fri, 26 Jul 2019 12:41:07 -0400 Subject: [PATCH 2/2] Attach positioning handlers at bind time The positioning handlers have been attached at the time that the dropdown is opened since when they were first committed many years ago. It's not actually clear why this was being done, since they don't rely on anything involving the dropdown being open. This removes the flag and process for setting these handlers only after the dropdown was opened for the first time, and moves these handlers to always be set at bind time. --- src/js/select2/dropdown/attachBody.js | 46 ++++++++++++--------------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/src/js/select2/dropdown/attachBody.js b/src/js/select2/dropdown/attachBody.js index 5ea338eae7..12d9ad1f9f 100644 --- a/src/js/select2/dropdown/attachBody.js +++ b/src/js/select2/dropdown/attachBody.js @@ -11,37 +11,11 @@ define([ AttachBody.prototype.bind = function (decorated, container, $container) { var self = this; - var setupResultsEvents = false; - decorated.call(this, container, $container); container.on('open', function () { self._showDropdown(); self._attachPositioningHandler(container); - - if (!setupResultsEvents) { - setupResultsEvents = true; - - container.on('results:all', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - - container.on('results:append', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - - container.on('select', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - - container.on('unselect', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - } }); container.on('close', function () { @@ -49,6 +23,26 @@ define([ self._detachPositioningHandler(container); }); + container.on('results:all', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + + container.on('results:append', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + + container.on('select', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + + container.on('unselect', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + this.$dropdownContainer.on('mousedown', function (evt) { evt.stopPropagation(); });