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) {
//e.preventDefault();
//Se clickeó el mouse
});
$('.select-dropdown').on('mouseup', function(e) {
//e.preventDefault();
//Se soltó el mouse
});
});
});
<!--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>