Hello all today i will share one inserting issue, when we used conditional rendering within
Lightning-progress-indicator
ProgressIndicatorBasic.html
<template>
<p>
A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.
</p>
<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
<lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
<template if:true={areDetailsVisible}>
<lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
</template>
<lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
<lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
</lightning-progress-indicator>
</template>
ProgressIndicatorBasic.js
import { LightningElement } from 'lwc';
export default class ProgressIndicatorBasic extends LightningElement {}
Issue: As per the above code if <template if:true={areDetailsVisible}> is true then Lightning-progress-indicator step will
correctly otherwise current steps selection will display correctly.
Updated code:-
<template>
<p>
A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.
</p>
<template if:true={areDetailsVisible}>
<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
<lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
<lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
<lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
<lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
</lightning-progress-indicator>
<template>
<template if:false={areDetailsVisible}>
<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">
<lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
<lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
<lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
</lightning-progress-indicator>
<template>
</template>
