Prevent materializecss dropdown to close when clicking inside it?

not understanding how to use the event.stopPropagation() function

Matrialize CSS has a default option to disable automatic closing of the menu: closeOnClick: false. This also dosent seem to work.

Solutions I've tried:- Following the advise in this closely related question: Prevent materializecss dropdown to close when clicking inside it I've tried something similar with keydown, keyup and keypress events. None had any effect:

the code runs perfectly fine. but im not able to implement event.stopPropagation() or closeOnClick:false

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--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/1.0.0-beta/css/materialize.min.css">
  <title>select country</title>
</head>

<body>
  <div class="navbar-fixed">
    <nav class="nav-wrapper indigo">
      <div class="container">
        <a href="#" class=" right brand-logo">select destination</a>
        <a href="#" class="sidenav-trigger" data-target="mobile-links">
          <i class="material-icons">menu</i>
        </a>
        <ul class="left hide-on-med-and-down">
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1" onclick="stop()">one</a>
            <ul id="dropdown1" class="dropdown-content">
              <li><a href="#!">one</a></li>
              <li><a href="#!">two</a></li>
              <li class="divider"></li>
              <li><a href="#!">three</a></li>

            </ul>
          </li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">two</a>
            <ul id="dropdown2" class="dropdown-content">
              <li><a href="#!">one</a></li>
              <li><a href="#!">two</a></li>
              <li class="divider"></li>
              <li><a href="#!">three</a></li>
            </ul>
          </li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown3">three</a>
            <ul id="dropdown3" class="dropdown-content">
              <li><a href="#!">one</a></li>
              <li><a href="#!">two</a></li>
              <li class="divider"></li>
              <li><a href="#!">three</a></li>
            </ul>
          </li>
          <li><a class="dropdown-trigger" data-target="dropdown4" style="width: 500px;">four</a>
            <ul id="dropdown4" class="dropdown-content">
              <li><a href="#!">one</a></li>
              <li><a href="#!">two</a></li>
              <li class="divider"></li>
              <li>
                <div class="row">
                  <div class="input-field col s12">
                    <input type="text" id="autocomplete-input" class="autocomplete">
                    <label for="autocomplete-input">Autocomplete</label>
                  </div>
                </div>
                </a>
              </li>

            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>


  <!-- Compiled and minified JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.sidenav').sidenav();
      $(".dropdown-trigger").dropdown();
    });
    $('.dropdown-trigger + .dropdown-content').on('click', function(event) {
      event.stopPropagation();
    });
  </script>
</body>

</html>

Solution

closeOnClick:false

works as exactly expected:

<!-- Dropdown Trigger -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, {closeOnClick:false});
  });

Codepen

Always use the latest version and always read the documentation.