Select2在选择上打开下拉菜单

如何解决Select2在选择上打开下拉菜单

我想要类似第一个示例的https://material.angular.io/components/select/overview
我尝试了Select2 change container position此处提供的所有方法。
它们可以正常工作，但下拉菜单在打开后会自动关闭！

之所以发生这种情况，是因为该下拉列表也正获得click事件，因为该下拉列表正好在鼠标光标下方打开！

我对此进行了测试

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

如果我延迟重新定位，则下拉列表不会自动关闭。

我当时正在考虑实现自定义下拉菜单适配器，但这对于简单的重新定位任务来说似乎太复杂了！

有什么解决办法吗？

我也愿意使用其他库...我只需要一个自定义选择框...

$(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>

解决方法

之所以发生这种情况，是因为该下拉列表也正获得click事件，因为该下拉列表正好在鼠标光标下方打开！

看来您是对的，但我不明白为什么。可能是因为Select2使用mousedown事件来打开下拉菜单，而click事件来选择选项（鼠标事件依次触发-mousedown-> mouseup-> click）

在这种情况下，这样的事情似乎是我可以建议的最佳解决方案：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;
}

基本上，这是您使用计时器的解决方案，但我不会延迟定位，而是禁用了鼠标事件并在300ms之后启用了它们。不过，这并不是一个完美的解决方案，可能会让用户感到迟钝。也许您可以尝试将一些CSS动画添加到重新定位IDK中。

不幸的是，我不能为香草JS建议任何Select2替代品。