Skip to main content
1 de 5

Listas Desplegables no funcionan correctamente en nueva versión de GoogleChrome (Materialize v 0.100.2)

sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    console.log('Se clickeó el mouse');

    $('.select-dropdown').on('mouseup', function(e) {
      console.log('Se soltó el mouse');
      console.log('*****************');
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>