Dropdown does not reposition when multiple selections cause the input to increase in height

[tim-lukacik]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• The issue still exists against the latest master branch of Select2
• This is not a usage question (Those should be directed to the community)
• I have attempted to find the simplest possible steos to reproduce the issue
• I have included a failing test as a pull request (Optional)

Steps to reproduce the issue

1. Enable multiple selection
2. Set "closeOnSelect: false"
3. Select many items so that selections take up 2 lines or more.

Expected behavior and actual behavior

When I follow those steps, I see...
The dropdown remains in the same position despite that the actual input has now grown in height. This blocks all selections on line 2 and beyond.

I was expecting...
The dropdown should reposition itself again so that it remains below the expanded input.

Environment

Browsers

• Google Chrome
• Mozilla Firefox (Not tested)
• Internet Explorer

Operating System

• Windows
• Mac OS X (Not tested)
• Linux (Not tested)
• Mobile (Not tested)

Libraries

• jQuery version: 2.1.4 (Also tested with 3.1.0)
• Select2 version: 4.0.3

Isolating the problem

• This bug happens on the examples page
• The bug happens consistently across all tested browsers
• This bug happens when using Select2 without other pluigns
• I can reproduce this bug in a jsbin

[devmonkey22]

I have the same issue. Same versions of jQuery/select2.

[HarryMuc]

I had the same issue and commented this line:

container.on('select', function () {
  if (!container.isOpen()) {
    return;
  }

  self.setClasses();
  // self.highlightFirstItem(); // $custom (hkl) OTB74270, deactivated see https://github.com/select2/select2/issues/4584
});

See also:
#4417
#1672
#1513
#4414
#4584

[devmonkey22]

Thanks @derrick13 - this will solve a variation of this issue, but didn't solve my main problem.

For me, this issue is focused on the fact that the "select2-container--open" element when "select2-dropdown--below" is not repositioned after a selection is made when closeOnSelect: false. The "select2-selection select2-selection--multiple" span element wraps to multiple lines, but the results dropdown doesn't reposition below the span. It ends up overlaying over lines 2+.

Using your tip, from my research, it looks like the AttachBody decorator needs to somehow watch when a selection is made and possibly call its _positionDropdown method, just like it sets up in _attachPositioningHandler. I'm just unfortunately new in the codebase to efficiently make the right fix in the time I have right now.

[alexweissman]

This actually is a duplicate of #4377. Please continue any discussion about this problem over there.