{"action":"created","issue":{"url":"https://api.github.com/repos/google/material-design-lite/issues/4205","repository_url":"https://api.github.com/repos/google/material-design-lite","labels_url":"https://api.github.com/repos/google/material-design-lite/issues/4205/labels{/name}","comments_url":"https://api.github.com/repos/google/material-design-lite/issues/4205/comments","events_url":"https://api.github.com/repos/google/material-design-lite/issues/4205/events","html_url":"https://github.com/google/material-design-lite/issues/4205","id":141026154,"number":4205,"title":"MDL Ripple component is created/initialized before custom component. ","user":{"login":"leifoolsen","id":10088486,"avatar_url":"https://avatars.githubusercontent.com/u/10088486?v=3","gravatar_id":"","url":"https://api.github.com/users/leifoolsen","html_url":"https://github.com/leifoolsen","followers_url":"https://api.github.com/users/leifoolsen/followers","following_url":"https://api.github.com/users/leifoolsen/following{/other_user}","gists_url":"https://api.github.com/users/leifoolsen/gists{/gist_id}","starred_url":"https://api.github.com/users/leifoolsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leifoolsen/subscriptions","organizations_url":"https://api.github.com/users/leifoolsen/orgs","repos_url":"https://api.github.com/users/leifoolsen/repos","events_url":"https://api.github.com/users/leifoolsen/events{/privacy}","received_events_url":"https://api.github.com/users/leifoolsen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2016-03-15T16:24:41Z","updated_at":"2016-03-18T15:28:32Z","closed_at":null,"body":"MDL version: 1.1.2\r\nBrowser: Chrome\r\nBrowser version: 48.0.2564.103 (64-bit)\r\nOperating system: OS-X\r\nOperating system version:  10.11.3\r\nURL: NA\r\nWhat steps will reproduce the problem:\r\n\r\n&nbsp;1. I'm trying to write an MDL-component with ripple effect on child elements, similar to the MDL tabs component. The problem I am experiencing is that it seems as if MaterialRipple is initialized before I get the chance to add the `mdl-js-ripple-effect--ignore-events` class, and thus prevent the triggered ripple events to fire for the container.\r\n\r\nIt may be that this is not an issue, but rather something I've missed when it comes to developing MDL components.\r\n\r\n&nbsp;2. Html to support component\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>A basic MDL component</title>\r\n  <link rel=\"stylesheet\" href=\"../node_modules/material-design-lite/material.css\" />\r\n</head>\r\n<body>\r\n  <div id=\"mount\">\r\n    <div class=\"mdl-basic mdl-js-basic mdl-js-ripple-effect\">\r\n      <p>My basic MDL component</p>\r\n    </div>\r\n  </div>\r\n  <script type=\"text/javascript\" src=\"../node_modules/material-design-lite/material.js\" charset=\"utf-8\"></script>\r\n  <script type=\"text/javascript\" src=\"./mdl-basic-component.js\" charset=\"utf-8\"></script>\r\n</body>\r\n</html>\r\n```\r\n&nbsp;3. The stripped down component:\r\n```javascript\r\n(function() {\r\n  'use strict';\r\n\r\n  const MaterialBasic = function MaterialBasic(element) {\r\n    // Stores the element.\r\n    this.element_ = element;\r\n\r\n    console.log(this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));\r\n\r\n    // Initialize instance.\r\n    this.init();\r\n  };\r\n  window['MaterialBasic'] = MaterialBasic;\r\n\r\n  MaterialBasic.prototype.Constant_ = {\r\n    RIPPLE_COMPONENT: 'MaterialRipple'\r\n  };\r\n\r\n  MaterialBasic.prototype.CssClasses_ = {\r\n    IS_UPGRADED: 'is-upgraded',\r\n    JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',\r\n    JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'\r\n  };\r\n\r\n  MaterialBasic.prototype.init = function() {\r\n    if (this.element_) {\r\n      if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {\r\n        // Ignore ripple event on this container \r\n        this.element_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT_IGNORE_EVENTS);\r\n      }\r\n\r\n      // Do the init required for this component to work\r\n\r\n      // Set upgraded flag\r\n      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);\r\n    }\r\n  };\r\n\r\n  // The component registers itself. It can assume componentHandler is available\r\n  // in the global scope.\r\n  /* eslint no-undef: 0 */\r\n  componentHandler.register({\r\n    constructor: MaterialBasic,\r\n    classAsString: 'MaterialBasic',\r\n    cssClass: 'mdl-js-basic'\r\n  });\r\n})();\r\n```\r\nWhat is the expected result?\r\nRipple event should not fire on container\r\n\r\nWhat happens instead of that?\r\nRipple event fires and throws an error: \"Uncaught TypeError: Cannot read property 'classList' of null\"\r\n\r\nIf I add the class `mdl-js-ripple-effect--ignore-events` in markup everything works as expected.\r\n\r\nI would expect that my component was initialized before the MDL Ripple component, but it does not seem to happen. Is there a known workaround for this?\r\n\r\nRegards\r\nLeif Olsen"},"comment":{"url":"https://api.github.com/repos/google/material-design-lite/issues/comments/198409150","html_url":"https://github.com/google/material-design-lite/issues/4205#issuecomment-198409150","issue_url":"https://api.github.com/repos/google/material-design-lite/issues/4205","id":198409150,"user":{"login":"leifoolsen","id":10088486,"avatar_url":"https://avatars.githubusercontent.com/u/10088486?v=3","gravatar_id":"","url":"https://api.github.com/users/leifoolsen","html_url":"https://github.com/leifoolsen","followers_url":"https://api.github.com/users/leifoolsen/followers","following_url":"https://api.github.com/users/leifoolsen/following{/other_user}","gists_url":"https://api.github.com/users/leifoolsen/gists{/gist_id}","starred_url":"https://api.github.com/users/leifoolsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leifoolsen/subscriptions","organizations_url":"https://api.github.com/users/leifoolsen/orgs","repos_url":"https://api.github.com/users/leifoolsen/repos","events_url":"https://api.github.com/users/leifoolsen/events{/privacy}","received_events_url":"https://api.github.com/users/leifoolsen/received_events","type":"User","site_admin":false},"created_at":"2016-03-18T15:28:32Z","updated_at":"2016-03-18T15:28:32Z","body":"Shouldn't an embedded component initialize after the owner? "}}