Materialize: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable

Solution 1: ^[1]

This problem can happen when the input field is not wrapped inside a div with the class input-field:

  <div class="input-field">
    <input type="text" class="autocomplete"></input>
  </div>

Adding a div with the class "input-field might solve this problem.

Solution 2: ^[2]

use id selector instead class selector. for example call dropdown like this :

html :

<a class='dropdown-trigger' id="dropdowner" 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>

js:

$('#dropdowner').dropdown();

Solution 3: ^[3]

Can only be used once.
data-target="name_target" must not be repeated

Exam1.❌

<nav>
  <div class="nav-wrapper">
    <ul class="right hide-on-med-and-down">
      <li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
 <li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>
  <!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
</ul>

Exam2.✔️

<nav>   <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
    </ul>   </div> </nav>   <ul id="name_target2" class="dropdown-content">   <li><a href="#!">one</a></li>   <li><a href="#!">two</a></li> </ul>

Solution 4: ^[4]

When I ran into this issue I was trying to create the whole dropdown list dynamically in JS. The fix for me was creating the list and any default list elements in HTML:

<div id="select1" class=\"input-field col s12\">
    <select>
        <option value="" selected>Default</option>
    </select>
    <label>Test</label>
</div>

Then appending any dynamic values in JS:

contents.forEach(function(content) {
    var buffer = "<option></option>";
    var template = $(buffer);
    $(template).text(content);
    $("select1").find("select").append(template);
});

$("select").formSelect();

Solution 5: ^[5]

pre 1.0.0 you would use data-activates, if data-target is not specified you will get this error

Credits

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Credit
Solution 1	Paul Massendari
Solution 2	sajjad
Solution 3	kongi momolove
Solution 4	brendan behrens
Solution 5	Pulse-Eight

Materialize: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable

Solution 1: [1]

Solution 2: [2]

Solution 3: [3]

Solution 4: [4]

Solution 5: [5]