1

Simple, yet unable to figure out why. I'm trying to highlight the clicked step by user.Something like this enter image description here 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.

Improve this question

1 Answer 1

Reset to default
0

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:

<lightning-progress-indicator current-step={currentStep} type="path" variant="base">

...

currentStep='step-3';

...

handleOnClick(event){
    this.currentStep = event.target.dataset.id;
    this.testVar = !this.testVar;  //TROUBLE MAKER STATMENT
}

...

See the Playground for this.

Improve this answer
4
  • @sfdcfoc, thanks.. But, Sry. I guess my question was not clear .we are doing the same approach in actual code, But If user click on step 4, step 1, step 2 and step 3 shows as completed (green color with tick mark) ✅ . My intention is just to make it look like Active. It's like user has actually completed Step-1 and now he is curious about step 4.. he just clicks and sees what is in there. Every time user clicks, we render the testvar with different set of data on UI.When they perform certain operations, we actually set the flag which will actually say whether or not the step is complete.[1/2]
    – LWC_Beginner
    Commented Jun 19, 2020 at 13:28
  • [2/2]. If you see my above screenshot, user is yet to complete some things before we set step 3 (Unqualified) to complete. But he is curious to see whats in Step-4 (Nurturing). In that case, I need to manually update slds class to slds-is-active so that step 4 will highlighted.
    – LWC_Beginner
    Commented Jun 19, 2020 at 13:30
  • 1
    @LWC_Beginner Ah, okay. Path is not acceptable for that, because this is how Path works, and trying to hack its behavior wouldn't be recommended. You can make your own custom path component to get the behavior you want without too much trouble (path itself is only 50-100 lines of code or so). Alternatively, you might want to create your own design, as I don't think SLDS has a wizard-like UI that supports your use case.
    – sfdcfox ♦
    Commented Jun 19, 2020 at 15:39
  • thanks fro the reply.. yes Indeed. I have started to build custom component : ) Cheers
    – LWC_Beginner
    Commented Jun 22, 2020 at 5:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .