Select2 在 Magnific Popup 中：搜索输入框无法聚焦

Question

我使用select2 jQuery插件与magnific popup一起。如果我在打开的弹出窗口中点击选择框，就会出现带有一些结果的搜索框。问题是无法在搜索框中输入任何内容 - 光标根本不会出现。这是一个演示问题的jsfiddle http://jsfiddle.net/clime/qweWa/15/。代码如下：

# html
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<div id="test-popup" class="white-popup mfp-hide">
    <select id="focus-blur-loop-select">
        <option>hello</option>
        <option>world</option>
    </select>
</div>

# js
$(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });

  $('#focus-blur-loop-select').select2({
      width: '200px'
  });
});

# css
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

我已经做了一些基础研究，发现以下两个回调函数被无限调用。事件中似乎存在无限循环。

// select2.js:742
search.on("focus", function () { search.addClass("select2-focused"); });
search.on("blur", function () { search.removeClass("select2-focused");});

- clime

Answer 1

答案在这里：https://github.com/dimsemenov/Magnific-Popup/issues/280。问题是由于select2输入框被渲染到弹出窗口元素之外而引起的。可以通过覆盖弹出窗口的_onFocusIn方法来解决此问题。

$.magnificPopup.instance._onFocusIn = function(e) {
    // Do nothing if target element is select2 input
    if( $(e.target).hasClass('select2-input') ) {
       return true;
    } 
    // Else call parent method
    $.magnificPopup.proto._onFocusIn.call(this,e);
}

- clime

---

对于 Select2 v4.x，我相信 className 已更改为 "select2-search__field"。 - James Moberg

@clime。如果您能为v4.x添加新类，那将更好。 - Sameera Liyanage

很好的发现，这不仅影响了 select2，实际上它也会影响大多数文本输入框，如果你在弹出窗口中提供了动态内容，它将禁用那里的文本框，在问题上苦苦思考。+1 - Kevin

Answer 2

您应该在magnificPopup调用中使用“focus”选项：

$('.open-popup-link').magnificPopup({
  type:'inline',
  focus: '#focus-blur-loop-select',
  midClick: true
});

在magnificPopup文档中，它被定义如下：

focus (空字符串)

弹出窗口内应聚焦的元素的CSS选择器字符串。理想情况下，它应该是可以聚焦的弹出窗口的第一个元素。例如，'input'或'#login-input'。保留为空以聚焦于弹出窗口本身。

- buzkall

---

谢谢。对我来说，添加焦点：“#select2-search__field”解决了这个问题。 - Can Celik