0

Trying to make an app that uses Material Design Lite. However, I've encountered a problem where MDL menu just won't open.

Check this pen

I also have tried following this article, which describes that React and MDL don't play along nicely and it is needed to call componentHandler to upgrade elements. But in this pen components are not dynamically loaded, so they should be updated automatically.

Looking forward to hearing your answers, thanks!

Enki
  • 3
  • 2
  • There are actually a couple of reasons why React and MDL don't play nicely. The problem you're experiencing is that React will delegate all events to the document body, and it will use a SyntheticEvent in place of a browser's native event for compatibility reasons ([more info here](https://facebook.github.io/react/docs/events.html)). In short, when an event is fired on your component, **your component will be the last to hear of it**, so the upgraded MDL component isn't receiving a click event. I don't have a solution for you, but perhaps this information can help you find one. – Michael Parker Jun 26 '16 at 14:02

1 Answers1

0

You need to use htmlFor instead of for when using React. Check it out.

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
      for="demo-menu-lower-left">

should be:

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
      htmlFor="demo-menu-lower-left">

See the updated pen here.

lkg
  • 876
  • 4
  • 10