语义 UI 搜索选择不会在模态加载时保持 collapsed/unfocused

Question

我正在使用 Semantic UI Search Selection 并使用非常简单的 .dropdown() 实现将静态标记转换为可搜索的国家/地区输入。

问题是此输入会自动聚焦并且菜单会在页面加载时下拉。如果我等到 $(window).load()，我可以从元素（及其子元素）中删除 active 和 visible 类，但我宁愿在没有这些的情况下实例化菜单开始于.

我的标记如下所示：

$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的代码中没有 .dropdown() 的其他实例。想法？

编辑： 我发现这是因为表单包含在模态中。当表单在模态之外时，不会出现此问题。

Answer 1

截至 2015 年 4 月，有一个未记录的模态设置负责聚焦模态中包含的第一个 input 元素：

autofocus: function() {
    if(settings.autofocus) {
        var
            $inputs    = $module.find(':input:visible'),
            $autofocus = $inputs.filter('[autofocus]'),
            $input     = ($autofocus.length > 0)
                ? $autofocus
                : $inputs
        ;
        $input.first().focus();
    }
},

我们可以在 $.fn.modal.settings 下使用此设置。因此，以下内容将阻止此搜索输入在模式打开时聚焦：

$('.ui.modal').modal({
    autofocus: false,
}).modal('show');

还有一个可运行的例子：

$('.ui.modal').modal({
    autofocus: false,
}).modal('show');

$('.ui.dropdown').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

语义 UI 搜索选择不会在模态加载时保持 collapsed/unfocused

Semantic UI Search Selection won't remain collapsed/unfocused on Modal load

javascript

jquery

semantic-ui