Materialize: Dropdown throws Uncaught TypeError: Cannot set property 'tabIndex' of null when rendered in reactjs

[SandeepVattapparambil]

Dropdown throws an Uncaught TypeError: Cannot set property 'tabIndex' of null when rendered in reactjs.

Expected Behavior

Its supposed to be rendered properly without throwing any error

Current Behavior

This is what we get

Steps to Reproduce (for bugs)

you can use the below code to reproduce the bug
https://github.com/reactMaterial/react-material/blob/master/src/components/app-dropdown/Dropdown.js

Context

Trying to create a generalized reactjs component

Your Environment

• Version used: 1.0.0
• Browser Name and version: chrome Version 68.0.3440.106 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10
• Link to your project (if appropriate): https://github.com/reactMaterial/react-material

[SandeepVattapparambil]

solved

[notebk]

Hey @SandeepVattapparambil how were you able to solve it? Running into a similar issue on my app

[SandeepVattapparambil]

@notebk in my case the error was thrown at the componentDidMount() lifecycle method. when I tried this.element = document.querySelector('.dropdown');, i got the error.
so i changed it to the following:

let element = document.querySelector('.dropdown');
this.element = element;

and it was solved.

[notebk]

@SandeepVattapparambil Got it, thanks for that explanation!

[Dijkie-MG]

I came on this issue because I had a simular error notification.

Turned out that I used the same id-names for tabs in my site and in the loaded modal. Maybe this helps anybody

[dipakchandranp]

I too got this same error, while using with React.

In my react component in the render method I had the dropdown-trigger element with the reference to data-target="dropdown1". I had written different function for getting the element which is referred by the data-taget attribute, and when I did drop down initialisation from componentDidMount function got this error.

I solved this by keeping the data-target element in the render function itself, and content inside that was only populated through the function. (_Basically drop down container element was there in DOM while componentDidMount function was executing._)

[sajadghobadi]

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