Expected MDL Event

Question

MDL updates its components when the page loads, so the <input> attribute with the autofocus attribute loses focus. I want to focus on this input after completing the MDL rendering.

I am trying to listen to some event ready codepen ):

 $('input#srch').one('componentDidUpdate', function(){console.log('ready')}); 

It does not work with selectors $(document) , nor $(document.body) , nor $('.mdl-layout') .
I was looking for some similar events, but no luck, am I missing something?
Of course, I can use setTimeout , but I don’t think this should be a solution 😁

Thanks.

Answer 1

You can listen for the mdl-componentupgraded event in the layout element, .mdl-ayout .

 $(document).ready(function() { $('.mdl-layout').on('mdl-componentupgraded', function(e) { if ($(e.target).hasClass('mdl-layout')) { alert('ready'); } }); }); 

Use on instead of one . Your page may be updated with several elements. Using one , you will catch only the first update. With on handler will be called several times due to the event bubble. Check e.target to respond to a specific update to the layout element.

Use the callback $(document).ready() . Wait until the DOM is ready before attaching handlers to its elements. Otherwise, the $('.mdl-layout') selector may not match, and the event handler may not attach.

Answer 2

 /* Check if the material design has finished the rendering */ var mdlLoaded = setInterval(function(){ if(typeof document.querySelector('.mdl-js-layout') !== 'undefined') init() }, 100) function init () { clearInterval(mdlLoaded) alert('ready') } 

Answer 3

I am sure you could listen to the mdl-componentupgraded event:

 $('input#srch').bind('mdl-componentupgraded', function(){console.log('ready')});