The same code runs with different results - LWC

Question

This is the result I run in component-library

Next and previous steps work fine

This is the result of my run at SandBox Org The currentStep value was not obtained correctly.

HTML

<template>
    <div class="slds-box">
        <lightning-layout vertical-align="center">
            <lightning-layout-item size="1" flexibility="auto">
                <lightning-button-icon icon-name="action:back" onclick={handleBackStep}></lightning-button-icon>
            </lightning-layout-item>
            <lightning-layout-item size="10" flexibility="auto">
                <lightning-progress-indicator current-step={currentStep}>
                    <lightning-progress-step label="1" onclick={handleStepBlur} value="1">
                    </lightning-progress-step>
                    <lightning-progress-step label="2" onclick={handleStepBlur} value="2">
                    </lightning-progress-step>
                    <lightning-progress-step label="3" onclick={handleStepBlur} value="3">
                    </lightning-progress-step>
                    <lightning-progress-step label="4" onclick={handleStepBlur} value="4">
                    </lightning-progress-step>
                </lightning-progress-indicator>
            </lightning-layout-item>
            <lightning-layout-item size="1" flexibility="auto">
                <lightning-button-icon icon-name="utility:forward" onclick={handleNextStep}></lightning-button-icon>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

JS

import { LightningElement, track, wire } from 'lwc';

export default class convertLead extends LightningElement {

    currentStep = '1';
    //progress onclick
    handleStepBlur(event) {
        this.currentStep = event.target.value;
    }

    //Back Step onclick
    handleBackStep(event) {
        console.log('Back = ' + Number(this.currentStep));
        var step = Number(this.currentStep) - 1;
        if (step === 0) {
            return;
        }
        this.currentStep = toString(step);
    }

    //Next Step onclick
    handleNextStep(event) {
        console.log('Next = ' + Number(this.currentStep));
        var step = Number(this.currentStep) + 1;
        if (step === 5) {
            return;
        }
        this.currentStep = toString(step);
    }
}

Answer 1

I would be keeping this as simple as possible (KISS) and stay away from Number() and toString(), which is the reason of the NaN result.

//Back Step onclick
handleBackStep(event) {
    console.log('Back = ' + this.currentStep);
    if (this.currentStep === 0) {
        return;
    }
    --this.currentStep;
}

//Next Step onclick
handleNextStep(event) {
    console.log('Next = ' + this.currentStep);
    if (this.currentStep === 5) {
        return;
    }
    ++this.currentStep;
}

Update

To allow the step-blur functionality to continue working as expected, you will need two variables in your JS. The first is to act as a numerical counter, second will the string used in the lightning-progress-indicator.

currentStepCounter = 1;
currentStep = "1";

//progress onclick
handleStepBlur(event) {
    this.currentStep = event.target.value;
    this.currentStepCounter = Number(this.currentStep);
}

//Back Step onclick
handleBackStep(event) {
    if (this.currentStep === 0) return;
    this.currentStepCounter--;
    this.currentStep = this.currentStepCounter.toString();
}

//Next Step onclick
handleNextStep(event) {
    if (this.currentStep === 5) return;
    this.currentStepCounter++;
    this.currentStep = this.currentStepCounter.toString();
}