Select Multiple Materialize on mobile

Asked

Viewed 161 times

0

I have a question on select Multiple from Materialize to mobile. I cannot select another option, other than Bootstrap that when clicking outside the field, it automatically exits.

Someone’s been through something like this?

/* Select */
 $(document).ready(function() {
  $('select').material_select();
});
<h5 class="margintext">Pesquise seu imóvel</h5>
            <div class="input-field col s12 m4 l3">
              <select multiple>
                <option value="" disabled selected>Finalidade</option>
                <option value="1">Venda</option>
                <option value="2">Aluguel</option>
                <option value="3">Aluguel temporada</option>
              </select>
            </div>

            <div class="input-field col s12 m4 l3">
              <select multiple>
                <option value="" disabled selected>Cidades</option>
                <option value="1">Capão da Canoa</option>
                <option value="2">Porto Alegre</option>
                <option value="3">Imbé</option>
                <option value="3">Caxias</option>
              </select>
            </div>

            <div class="input-field col s12 m4 l3">
              <select multiple>
                <option value="" disabled selected>Bairros</option>
                <option value="1">Cetro</option>
                <option value="2">Zona Nova</option>
                <option value="3">Navegantes</option>
              </select>
            </div>

inserir a descrição da imagem aqui

1 answer

0

Anyone with the same problem just paste this script

$(document).on('touchstart', function (e) {
    let target = $(e.target);
    if (!target.is("span")) { //checking if you are tapping on items in multiple select or not
        $(document).trigger('click'); //if you are tapping outside multiple select close it
        $(':focus').blur(); //focus out for multiple select so you can choose another or the same (in case you have more multiple selects on page)
    } else {
        //nothing or fire another event
    };
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.