onClick event of third party jquery dropdown pluggin list item throwing an error in react js. Uncaught Error: Invariant Violation: findComponentRoot

Question

My requirement is very simple. i am using materialize css dropdown pluggin. which is similar to bootstrap dropdown. Basically, I wrote a React component which renders the template of the dropdown. After rendering, in componentDidMount function I am initializing dropdown using materialize pluggin.

My Component Render Function:-

 render: function () {
    var that = this;
    return (
      <div>
        <a ref="addComponent" className="add-component dropdown-button  btn-floating btn-large waves-effect waves-light grey" data-activates='dropdown1'>
          <i className="mdi-content-add"></i>
        </a>
        <ul id='dropdown1' className='dropdown-content'>
           {
             this.state.items.map(function (item, index) {
               return <li key={index} onClick={that.triggerEvent.bind(null, item)}>{item}</li>

             })
             }
        </ul>
      </div>

    );
  }

ComponentDidMount function ;-

componentDidMount: function () {
    var that = this;
    var component = $(this.refs.addComponent.getDOMNode());
    setTimeout(function () {
      component.dropdown({
          inDuration: 300,
          outDuration: 225,
          constrain_width: false, // Does not change width of dropdown to that of the activator
          hover: false, // Activate on click
          alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
          gutter: 0, // Spacing from edge
          belowOrigin: false // Displays dropdown below the button
        }
      );

    })
  }

My Dropdown list initialized in getInitialState function :-

getInitialState: function () {
    return {
      items: ["Item1", "Item2", "Item3"]
    }
  }

Whenever i click the button dropdown is opening. After that, if i select any item, click event handler is not triggering. please check the event handler registration in render function.

<li key={index} onClick={that.triggerEvent.bind(null, item)}>{item}</li>

I am getting the following error in console

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.$1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like ,
, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID

Please check the jdfiddle for more details http://jsfiddle.net/pashaplus/3u9xug0b/

I couldn't fix it, but it has something to do with the id of the ul (If you change it, it doesn't give you the error, but the dropdown doesn't work either). More likely it has something to do with the data-activates property of the anchor tag. My guess is that React changes something in the ul when that link is clicked and then blames it on the browser in the error message. — Geoffrey Burdett, Apr 01 '15 at 19:05

score 2 · Answer 1 · edited May 23 '17 at 12:06

The materializecss initialisation function for the dropdown component (component.dropdown(...) in your code) modifies the DOM.

You can observe this by:

adding a significant delay in your setTimout(...) call (I added 30000, so 30sec)
run the jsfiddle
open your Chrome Dev Tools, locate the big (+) element, take a screenshot of the source code around it
after 30s you will see the DOM changing, you can take another screenshot and compare.

What I saw is that your <ul> is moved by materializecss at the bottom of the body (just before the closing </body>) which means it is outside your <div id="container"> and outside of react's reach.

So basically react and materializecss don't play well with each other.

React does not watch the DOM, it works on a virtualDOM, computes diffs when something changes, and applies the minimum mutations necessary to the actual DOM. So react expects to be the only one doing mutations on the subtree that it manages (inside <div id="container">).

As for a solution, you can look at this for example: Using JQuery plugins that transform the DOM in React Components?

In that case why dropdown is opening? if i understand correctly it should throw an error when i try to open the dropdown or when i try to initialize the dropdown right? in both cases dom is mutated by materialize right?.But why this is only happening onClick event of item? — pashaplus, Apr 02 '15 at 05:37
Closing works too actually, try removing the onClick handler on `

onClick event of third party jquery dropdown pluggin list item throwing an error in react js. Uncaught Error: Invariant Violation: findComponentRoot

1 Answers1