Dropdown materialize does not recognize click on smartphone in Chrome browser

Question

I have a table that has a materialize dropdown, which when selected by PC/Notebook works normally. But when clicked by some mobile device with the same browser it does not recognize touch as click and does not direct to the specific page. Code of <th> from the table below.

    <th>
        <!-- Dropdown Trigger -->
        <a class='dropdown-trigger btn' href='#' data-target='status'>Status</a>

        <!-- Dropdown Structure -->
        <ul id='status' class='dropdown-content'>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Não Iniciado"})">Não Iniciado</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Em Andamento"})">Em Andamento</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Pausado"})">Pausado</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Finalizado"})">Finalizado</a></li>
        </ul>
   </th>

I’m using jquery to call dropdowns

$('.dropdown-trigger').dropdown();

Answer 1

Try to do this:

Html:

<div>
    <!-- Dropdown Trigger -->
    <div class='btn'>
        <a id="dropdown-trigger" data-target="status" onclick="abreDropdown"> 
            Status
        </a>
    </div>

    <!-- Dropdown Structure -->
    <ul id='status' class='dropdown-content'>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Não Iniciado"})">Não Iniciado</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Em Andamento"})">Em Andamento</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Pausado"})">Pausado</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Finalizado"})">Finalizado</a></li>
    </ul>

Javascript:

document.addEventListener('DOMContentLoaded', function() {
  let elem = document.getElementById('dropdown-trigger');
  let instances = M.Dropdown.init(elem);
});

function abreDropdown(){
    let elem = document.getElementById('dropdown-trigger')
    M.Sidenav.getInstance(elem).open();
}

I had a similar problem with Materialize and Angular, where the system ignored the link and insisted on trying to open a new page.