Search code examples
javascripthtmlfocusdropdownmaterialize

Problems with dropdown in Materialize 1.0.0-rc.2


When any dropdown is open and I click on the input, the dropdown closes and the input focus disappears. I can not understand what the problem, help please. Someone faced this?

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


Solution

  • Solved a problem. I commented this lines in the library

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