Results dropdown position bug on the second search attempt

[onurkose]

#4614

http://jsbin.com/padukunigi/edit?html,js,output

Prerequisites

First ajax search results displays normally (dropdown upwards). Search input field hangs on the second attempt.

Steps to reproduce the issue

• When select element position close to lower end of the browser select2 results dropdown opens upwards (dropdown class is "select2-dropdown--above" situtation)
• First results set loads into dropdown as usual after search with no position error. After the selection dropdown closes as usual. (auto close on select option is set)
• If I click on select element again to make a new search, search input hangs way above the select element with a gap of empty space of the previous search results dropdown.

Expected behavior and actual behavior

When I analyse the select2.full.js#4.0.5 code, the line 806:
Results.prototype.clear = function () { this.$results.empty(); };
clears the results set and dropdown content.

... and the line 4276:

var dropdown = { height: this.$dropdown.outerHeight(false) };
gets the dropdown height in px to calculate the position the results panel in AttachBody class.

The line of 1180:

container.on('results:message', function (params) { self.displayMessage(params); });

prints the text messages above the search input. But displayMessage function on line of 810 also fires the clear function on line 806.

The problem is; when the line 4277 calculates the height, previous results is already there.
If you log the runtime, after click (on select2 element) event (I skip the unrelated other events)

1. calculates the height of results panel,
2. fires the display message func.
3. fires the clear func.
4. appends the message container on its place
5. displays the search field and the message

So, with the ghost height of the previous dropdown results set, search input field hangs in the air.

Environment

macOs 10.13

Google Chrome 62.0.3202.89
Firefox Developer Edition 58.0b1
Safari 11.0 (13604.1.38.1.6)

[marcelpisowicz]

add input event to resize and position Dropdown ;)
function with modified 2 lines below

AttachBody.prototype._attachPositioningHandler =
      function (decorated, container) {
    var self = this;

    var scrollEvent = 'scroll.select2.' + container.id;
    var resizeEvent = 'resize.select2.' + container.id;
    var orientationEvent = 'orientationchange.select2.' + container.id;
    var inputEvent = 'input.select2.' + container.id;

    var $watchers = this.$container.parents().filter(Utils.hasScroll);
    $watchers.each(function () {
      Utils.StoreData(this, 'select2-scroll-position', {
        x: $(this).scrollLeft(),
        y: $(this).scrollTop()
      });
    });

    $watchers.on(scrollEvent, function (ev) {
      var position = Utils.GetData(this, 'select2-scroll-position');
      $(this).scrollTop(position.y);
    });

    $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent + ' ' + inputEvent,
      function (e) {
          self._resizeDropdown();
          self._positionDropdown();
    });
  };

[alexweissman]

@onurkose @marcelpisowicz please consider submitting an actual PR instead of posting modified code in an issue. Furthermore, while your analysis is helpful, when you open a new issue when there is already an issue open (#4614), you're spreading out the conversation and making this bug more difficult to discuss and eventually fix.