我如何在 uikit uk-dropdown 中使用 select2？

Question

当我在 uk-dropdown Uikit 中使用 select2 下拉菜单并选择一个选项时，它会自动关闭模式。

这是代码笔：Codepen

// In your JavaScript code (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

<html>
  <head>

  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

  </head>

  <body>
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-dropdown="mode:click">
        sfsdf
        <select class="js-example-basic-single" name="state">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>

        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>

  </body>
</html>

Answer 1

出现此问题是因为 uikit 倾向于从 uikit 之外的其他元素窃取焦点。由于默认情况下，Select2 将下拉菜单附加到元素，它被认为是“在 uikit 之外”。

为避免此问题，您可以使用 dropdownParent 设置将下拉菜单附加到 uikit 本身：

$(document).ready(function() {
    $(".js-example-basic-single").select2({
        dropdownParent: $("#placeholder")
    });
});

工作代码片段：

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    dropdownParent: $("#placeholder")
  });
});

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<button class="uk-button uk-button-default" type="button">Click</button>
<div id="placeholder" uk-dropdown="mode:click">
    <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   
</div>

我如何在 uikit uk-dropdown 中使用 select2？

How can I use select2 inside uikit uk-dropdown?

jquery

uikit

jquery-select2