Materialize 1.0.0-rc.2中的下拉菜单问题

时间:2018-08-23 16:43:13

标签: javascript html focus dropdown materialize

打开任何下拉列表并单击输入时,下拉列表将关闭并且输入焦点消失。我不明白是什么问题,请帮忙。有人面对这个吗?

$('select').formSelect();
$('.dropdown-trigger').dropdown();
body {
  position: relative;
  padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<div class="row">

  <div class="input-field col s4">
    <input id="last_name" type="text" class="validate">
    <label for="last_name">Last Name</label>
  </div> 

  <div class="input-field col s4">
    <select>
      <option value="" selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>
  
  <div class="col s4">
     <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
</div>
</div>
</div>

1 个答案:

答案 0 :(得分:0)

解决了一个问题。我在库中对此行发表了评论

if (this.options.autoFocus) {
  this.el.focus();
}