Select2 open dropdown over the select

Question

I want something like the first example here https://material.angular.io/components/select/overview
I tried all the methods provide here Select2 change container position .
They work , BUT the dropdown is closed automatically right after it opens!

This happening because the dropdown is also getting the click event because the dropdown is opening exactly under the mouse cursor !

I tested it with this

.on('select2:open', function (e) {
      var container = $('.select2-container .select2-dropdown');
      setTimeout(function () {
        container.addClass('country-select-dropdown');
      },1000);
    })

If i delay the repositioning the dropdown won't close automatically.

I was thinking about implementing a custom dropdown adapter but that seems too complicated for a simple repositioning task!

SO any solution?

Also I am opento using other libraries ... I just need a custom select box ...

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    dropdownAutoWidth: true,
    minimumResultsForSearch: -1,
    dropdownCssClass: 'country-select-dropdown',
    dropdownParent: $('#slectParent').parent()
  });
});

#slectParent {
  position: reletive;
}

.country-select-dropdown {
  top: -2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<div id="slectParent">
  <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
  <div>

Prostatectomy

Answer 1

This happening because the dropdown is also getting the click event because the dropdown is opening exactly under the mouse cursor !

It seems you are right and I can't understand why. Probably because Select2 uses mousedown event to open dropdown and click event to select option (and mouse events fire in sequence - mousedown -> mouseup -> click)

Something like this seems to be the best solution I can propose in this situation: https://codesandbox.io/s/compassionate-kepler-fzt4h?file=/src/index.js

$(document).ready(function () {
  $(".js-example-basic-single")
    .select2({
      dropdownAutoWidth: true,
      minimumResultsForSearch: -1,
      dropdownCssClass: "country-select-dropdown",
      dropdownParent: $("#slectParent").parent()
    })
    .on("select2:open", function (e) {
      var container = $(".select2-container .select2-dropdown");
      setTimeout(function () {
        container.addClass("country-select-dropdown-open");
      }, 300);
    })
    .on("select2:closing", function (e) {
      var container = $(".select2-container .select2-dropdown");
      container.removeClass("country-select-dropdown-open");
    });
});

Css:

.country-select-dropdown {
  top: -2rem;
  pointer-events: none;
}

.country-select-dropdown-open {
  pointer-events: initial;
}

It's basically your solution with timer but instead of delaying positioning, I disable mouse events and enable them after 300ms. Still, not a perfect solution and might feel laggy for users. Maybe you can try to add some css animation to repositioning, idk.

Unfortunately, I can't suggest any Select2 alternatives for vanilla JS.

Spense

Is pointer-events: none; supported in all browsers? – Prostatectomy

@Prostatectomy according to MDN, in all modern browsers and ie11+ – Spense

Answer 2

Just find this line in select2.js

this.$results.on('mouseup', '.select2-results__option[aria-selected]',

and change to this

this.$results.on('click', '.select2-results__option[aria-selected]',

Alialia