Material-design-lite: Menus do not work. Just do not emerge.

Created on 16 Apr 2016 · 10Comments · Source: google/material-design-lite

Your menus just do not work.
I've included all the files from your CDN. Styles are in <head> and <script> is just before closing </body> tag.

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
</head>

    ....
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</body>

And here is my template for menu. And it doesn't make it. Menu doesn't emerge. A button ripple effect is the only piece that works.

<section>
                        <button id="numSelect" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Select Number
                        </button>
                        <ul className="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="numSelect">
                            <li className="mdl-menu__item">1</li>
                            <li className="mdl-menu__item">2</li>
                            <li className="mdl-menu__item">3</li>
                            <li className="mdl-menu__item">4</li>
                            <li className="mdl-menu__item">5</li>
                        </ul>
</section>

Source

wzup

Most helpful comment

@wzup i have the same issue. And this is my take on it.

This script, needs to run after the DOM has loaded:

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

The defer attribute is meant to tackle that. But since we use React to dynamically add and remove items to the DOM, the script is run before React has updated the DOM using javascript.

Now what? Well...

Every time we insert some element to the DOM through React, we need to ensure that the MDL fields are registered I believe. But how would you do that manually? What function should we call etc? I'm uncertain.

consideRatio on 24 Apr 2016

👍2

All 10 comments

It actually does work if you replace the html-propertie className with just the proper class. You can find a working CodePen here.

mspl13 on 16 Apr 2016

@mspl13
If I replace the html-property className with just the proper class it will not work at all. I intend to use the component in React app. React has no class attributes.

UPD:
Have just tried to use Tooltip with Button. Nope - tooltips do not work as well. However the Button is styled properly.

<button id="foo"
    className="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"
    onClick={this.foo}
    >
        <i className="material-icons" style={{color: '#fff'}}>add</i>
</button>
<div className="mdl-tooltip mdl-tooltip--large" for="foo">Add an Item</div>

wzup on 20 Apr 2016

Are you calling componentHandler.upgradeElement on anything?

brucedlukens on 21 Apr 2016

Please use StackOverflow for support and integration assistance. This tracker is only for problems with the code provided by Material Design Lite.

Thank you.

Garbee on 21 Apr 2016

@wzup i have the same issue. And this is my take on it.

This script, needs to run after the DOM has loaded:

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

The defer attribute is meant to tackle that. But since we use React to dynamically add and remove items to the DOM, the script is run before React has updated the DOM using javascript.

Now what? Well...

consideRatio on 24 Apr 2016

👍2

https://github.com/google/material-design-lite/issues/4196

consideRatio on 24 Apr 2016

This might be of interest. It successfully enables the ripple effect on the React.Components rendered buttons which are referenced. I do not know how to upgrade the textfields yet though. Note that componentHandler is a global object initialized by the MDL .js file.

A React component lifecycle method:

componentDidMount() {
  for (var key in this.refs) {
    componentHandler.upgradeElement(this.refs[key]);
  }
 }

Within the React components render() function:

<a className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="btnSignIn" ref="btnSignIn">
  Sign in
</a>

consideRatio on 24 Apr 2016

And my final issue was that that I had copied some rendered HTML, which had attributes like is-upgraded" and data-upgraded=",MaterialTextfield" set on them already, which causes the MDL code inside their provided .js file assume those elements are already processed. Removing those attributes solved my final issues. Below is the textfield html I rendered through my react component and then initialized using the lifecycle method, written about above.

<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" ref="txtUsernameContainer">
  <input className="mdl-textfield__input" type="text" id="txtUsername" />
  <label className="mdl-textfield__label" htmlFor="txtUsername">Text...</label>
</div>

consideRatio on 24 Apr 2016

👍1

try this

<select className="mdl-button mdl-button--raised mdl-button--colored">
          <option value="Indistinto">Indistinto</option>
          <option value="Venta">Venta</option>
          <option value="Alquiler">Alquiler</option>
        </select>