Skip to content

Drop-down area is not repositioned if still open when multi-select area changes size (e.g. closeOnSelect=false) #4377

@Loadmaster

Description

@Loadmaster

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 (4.0.2) - Unknown
  • This is not a usage question
  • I have attempted to find the simplest possible steos to reproduce the issue

Steps to reproduce the issue

  1. Enable tagging (tags:true), and do not close the drop-down on select/deselect actions (closeOnSelect:false).
  2. Add and remove (select/deselect) choices to make the tags area change height.
  3. When the tags area changes height, the drop-down element is not repositioned accordingly.

Expected behavior and actual behavior

The drop-down element should be repositioned when the tags area changes size.

Here is a tagged selection area with a few tags already selected:

bug-select2_1_03

This is what happens when one or more tags are selected and the tags area changes size (in this case, gets taller):

bug-select2_1_04

The newly selected choices have been added to the tags area, but their tags are hidden behind the drop-down element. The drop-down element is not repositioned (in this case, lowered) to expose the added tags.

Work-Around

I used a work-around, catching the "change" event and forcing a resize of the drop-down element:

// Force drop-down list to resize upon select/unselect
select2Elem.on("change",
    function(evt) {
        select2Elem.resize();
    }
);

Environment

Any browser.
Any O/S.

  • Select2 version: 4.0.2

External Links

The same bug was reported on StackOverflow at: http://stackoverflow.com/questions/37198185

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions