Uncaught TypeError: Cannot read property 'top' of undefined at step-navigator.js

Question

I am getting following error.

Uncaught TypeError: Cannot read property 'top' of undefined at step-navigator.js:158

I have created a custom step using Magento 2 documentation

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

I have added a new step for shipping and payment. When I am going to my custom step and click back on shipping. I get this error and both the step get displayed and selected.

        isVisible: ko.observable(false),
        errorValidationMessage: ko.observable(false),
        stepCode: 'shipping-method',
        stepTitle: 'Shipping Method',


        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                this.stepCode,

                null,
                this.stepTitle,

                this.isVisible,

                _.bind(this.navigate, this),

                15
            );

            return this;
        },


        navigate: function () {

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        },

Template

     <li id="shipping-method'"
       class="checkout-shipping-method"
       data-bind="fadeVisible: isVisible, blockLoader: isLoading"
     role="presentation">
     <div class="checkout-shipping-method">
    <div class="step-title"
         translate="'Shipping Methods'"
         data-role="title" />

    <each args="getRegion('before-shipping-method-form')" render="" />

    <div id="checkout-step-shipping_method"
         class="step-content"
         data-role="content"
         role="tabpanel"
         aria-hidden="false">
        <form id="co-shipping-method-form"
              class="form methods-shipping"
              if="rates().length"
              submit="setShippingInformation"
              novalidate="novalidate">

            <render args="shippingMethodListTemplate"/>

            <div id="onepage-checkout-shipping-method-additional-load">
                <each args="getRegion('shippingAdditional')" render="" />
            </div>
            <div role="alert"
                 if="errorValidationMessage().length"
                 class="message notice">
                <span text="errorValidationMessage()" />
            </div>
            <div class="actions-toolbar" id="shipping-method-buttons-container">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span translate="'CONTINUE TO PAYMENT INFORMATION'" />
                    </button>
                </div>
            </div>
        </form>
        <div class="no-quotes-block"
             ifnot="rates().length > 0"
             translate="'Sorry, no quotes are available for this order at this time'" />
    </div>
  </div>
</li>`

Answer 1

Step Code should be same on your js and html templete file.

Make sure stepCode: 'your_step_code' is same as you mention on your template file.

isVisible: ko.observable(false),
        errorValidationMessage: ko.observable(false),
        stepCode: 'your_step_code',
        stepTitle: 'Shipping Method',


        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                this.stepCode,

                null,
                this.stepTitle,

                this.isVisible,

                _.bind(this.navigate, this),

                15
            );

            return this;
        },


        navigate: function () {

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        },

The your_step_code value from the .js file should be used.

<li id="your_step_code" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Hope it'll help you.