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

问题

I am trying to test my vuejs component via jest that contains materialize select. When performing a component test, I get the following error in materialize.js:

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

How fix this error?

回答1:

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();

回答2:

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.

回答3:

I just stumbled this issue too while using Materializecss for my Vue project. As mentioned by sajjad, using id selector instead of class works. However, this is problem for initializing multiple dropdown, since each dropdown must have unique ID.

The way I solve this is just by selecting all the elements with the '.dropdown-trigger' class, and initialize every each of those. It works for me.

$.each($('.dropdown-trigger'), function(index, value) {
        $(value).dropdown();
});

来源：https://stackoverflow.com/questions/54343172/materialize-cannot-set-property-tabindex-of-null-at-dropdown-makedropdownfoc

标签

vuejs2

materialize