Having "li.active" inside step-content breaks button navigation

[iSarCasm]

The lib manipulates all HTML nodes "li.active" which are under stepper.

Example:

  <form>
  <ul class="stepper horizontal" ref={this.stepperRef}>
    <li class="step">
      <div class="step-title waves-effect">Step 1</div>
      <div class="step-content">
        Step 1 content
        <ul>
          <li class="active" onClick={(e) => {e.target.className="active"}}>
            123
          </li>
        </ul>
        <div class="step-actions">
          <button type="button" class="waves-effect waves-dark btn next-step">
            Next
          </button>
        </div>
      </div>
    </li>
    <li class="step">
      <div class="step-title waves-effect">Step 2</div>
      <div class="step-content">
        Step 2 content
        <div class="step-actions">
          <button type="button" class="waves-effect waves-dark btn next-step">
            Submit
          </button>
          <button type="button" class="waves-effect waves-dark btn previous-step">
            Back
          </button>
        </div>
      </div>
    </li>
    <li class="step">
      <div class="step-title waves-effect">Step 2</div>
      <div class="step-content">
        Step 2 content
        <div class="step-actions">
          <button type="button" class="waves-effect waves-dark btn next-step">
            Submit
          </button>
          <button type="button" class="waves-effect waves-dark btn previous-step">
            Back
          </button>
        </div>
      </div>
    </li>
  </ul>
</form>

1. Removes the "active" class from list item under step 1
2. Causes following errors when trying to navigate on step 2: 2.1 Uncaught TypeError: Cannot read property 'querySelectorAll' of null (at Object.defaultValidationFunction [as validationFunction] (mstepper.js:806)) 2.2 Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined (at mstepper.js:125)

Solution: a) Change the line:

var activeStep = stepper.querySelector("li.".concat(classes.ACTIVESTEP));

to:

var activeStep = stepper.querySelector("li.".concat([classes.STEP, classes.ACTIVESTEP].join(".")));

b) Use more specific class names for this library

[Kinark]

I'm going to close this issue, since it's a duplicate of #65

[iSarCasm]

@Kinark thanks for the quick fix

[Kinark]

@iSarCasm No problem :) I'm sorry I didn't inform you in this issue that a new version was released.