Working with a dynamic Stepper component

[arist0tl3]

I know this is outside of the scope of this project currently, but I think the Stepper component is a big value add, and making it work with meteor-mdl seems pretty straightforward.

I'm working with https://github.com/ahlechandre/mdl-stepper, and have things working well with auto-upgraded stepper components.

However, I'm doing something like this:

<ul class="mdl-stepper">
  {{#each steps}}
    <li class="mdl-step">
      <span class="mdl-step__label">
        <span class="mdl-step__title">
          <span class="mdl-step__title-text">{{name}}</span>
        </span>
      </span>
      <div class="mdl-step__content">
      </div>
      <div class="mdl-step__actions">
        <button data-stepper-continue>Continue</button>
      </div>
     </li>
  {{/each}}
</ul>

When I add steps dynamically, I need to re-upgrade the stepper. I tried using componentHandler.upgradeAllRegistered(); as well as componentHandler.upgradeDom(); and also the MDl versions of those functions. No dice.

What did work was componentHandler.downgradeElements(document.querySelector('.mdl-stepper'));, which seems to trigger the listener for autoupgrades in meteor-mdl.

I ended up with this attached to the click handler that inserts new steps:

Meteor.setTimeout(function () {
      componentHandler.downgradeElements(document.querySelector('.mdl-stepper'));
    }, 100);

Just wondering if there is a better way to do this?

[Zodiase]

I guess what you need is to prevent mdl from auto upgrading anything inside class="mdl-stepper"?