Material Design Lite + React - Prompt Issues

Question

Recently, I have integrated Material Design Lite into my React web application. For the most part, everything worked out very well, but I am currently having some problems with React event handling, which seem to be not very pleasant with some MDL components.

In particular, I have a DOM element with an onClick handler that works fine until an MDL tooltip is added, which is why onClick no longer works. I tried almost all possible options (put the tooltip in another place in the DOM, attach the onClick handler to the div container that has the tooltip as a child, etc.), and I just can't get it working.

Here's a JSBin demonstrating the problem (I also included an example that uses jQuery to bind a click handler to an element after mounting components, which actually works):

http://jsbin.com/sewimi/3/edit?js,output

I have some theories as to why this doesn't work, but I don't know enough about React or MDL to test them.

I believe this has something to do with how React handles events, and for some reason MDL seems to be facing this. In the documentation:

React does not actually attach event handlers to the nodes themselves. When React launches, it starts listening for all the events above using a single event listener. When a component is mounted or unmounted, event handlers are simply added or removed from the internal mapping. When an event occurs, React knows how to send it using this mapping. When there are no mapping event handlers in the event handler, React event handlers are simple no-ops

It looks like MDL can ruin the internal display of React events, which leads to the fact that my click on an element becomes no-op. But then again, this is just a complete hunch.

Does anyone have any ideas about this? I would prefer not to manually bind the event listener in componentDidMount for each of my components that use MDL hints (as was the case in the JSBin example that I provided), but this is the solution I'll show right now.

In addition, since I was not sure that it was an MDL error, I decided to post this question here, and not on the issues page. If someone thinks I should post it there, let me know and I can do it.

Thanks!

Answer 1

I also ran into this problem. I tried to capture event clicks on mdl-menu__item . And you're right that the React synthetic event system is colliding. It happens that if an event occurs inside your React component, your component will be the last to find out about the event . My job was to bypass the reaction event and use a reaction component that helps to attach my own react-native-listener events.

 <NativeListener onClickCapture={this.onListClick}> <li className='mdl-menu__item' > {...} </li> </NativeListener> // This will be called by the native event system not react, // this is in order to catch mdl-menu events and stop the menu from closing // allowing multiple fields to be clicked onListClick(field, event) { event.stopImmediatePropagation(); // console.log('click'); } 

My solution was for an mdl menu, but I'm sure it applies to the tooltip too.

Answer 2

Bit late but

 componentHandler.upgradeAllRegistered(); 

gets dynamically loaded items working.

Note: if you move the target element using a CSS position, the tooltip does not automatically display a new position, you will need to identify it and place it too.