0

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>

1 respuesta 1

0

Después de consular en foros y diferentes fuentes, al día de hoy no hay una solución concreta para este problema respecto a la nueva versión de Chrome y algunos componentes de Materialize Framework, por lo tanto, realicé una solución que por el momento me funciona. Esto es una solución provicional mientras Google Chrome da un soporte frente a este inconveniente o hace algo al respecto. Pero por el momento, propongo esto:

Básicamente, como el problema era dar doble click sobre la lista desplegable (En Google Chrome), para mostrar las opciones, entonces con el método setTimeout() programo un click en una pequeña fracción de tiempo, para que el usuario solamente tenga que dar un click e internamente damos el siguiente click, y así, cuando se presente el error de desplegar las opciones, no se tendrá el problema de dar doble cilck sobre las listas para mostrar las opciones.

$(document).ready(function(){
    $('select').material_select();

    $('body .select-dropdown').on('mousedown', function(e) {

      let thisElement = $(this);

      setTimeout(function() {
        $(thisElement).click();
      }, 350);
    });
});
<!--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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.