Simple, yet unable to figure out why. I'm trying to highlight the clicked step by user.Something like this 
No matter the step is complete or not just I need to set the slds to active. But due to @track variable the highlighted step is losing it's slds-is-active class which was assigned handleOnClick method of the step. however if you tab out from your screen, the class appears (alt+tab or cmnd+tab). This code can be placed as it is on playground to check.
<template>
<lightning-progress-indicator current-step="step-3" type="path" variant="base">
<template for:each={steps} for:item="step">
<lightning-progress-step label={step.label} value={step.value} key={step.label} onclick={handleOnClick} data-id={step.value}></lightning-progress-step>
</template>
</lightning-progress-indicator>
<template if:true={testVar}>
Toggling: Track variable is the problem
</template>
</template>
export default class ProgressIndicatorPathTypeWithIteration extends LightningElement {
@track testVar=false;
steps = [
{ label: 'Contacted', value: 'step-1' },
{ label: 'Open', value: 'step-2' },
{ label: 'Unqualified', value: 'step-3' },
{ label: 'Nurturing', value: 'step-4' },
{ label: 'Closed', value: 'step-5' },
];
handleOnClick(event){
this.template.querySelector('[data-id="'+event.target.value+'"]').classList.add('slds-is-active');
this.testVar = !this.testVar; //TROUBLE MAKER STATMENT
}
}
The highlight happens as expected when you remove this.testVar = !this.testVar. what could I possibly do. tried all supported events like onstepmouseleave,onstepblur,onstepfocus and onstepmouseenter. Remember if we tab out and come back to screen, things works. Any Suggestions pls.
Best Answer
You're confusing the component, as the step is already specified by the component, so it doesn't change properly. Here's an adjustment to your code that will work as expected:
...
...
...
See the Playground for this.