3

I'm building out a lightning component that leverages lightning:progressIndicator and lightning:progressStep, using the onstepfocus event to call a function in my javascript controller to trigger navigation options.

I've setup the progressSteps to create dynamically, and referenced this stackexchange for help on making the currentStage dynamic: lightning progressStep not able to set step when dynamically created

However, I'm still running into a challenge. Despite the stage still showing appropriately, the first step is always the step in focus. If I navigate off of a screen to another screen, the first step continues to be in focus (not active - that's happening appropriately with the currentStep attribute). This might be partially due to using this header in multiple different subflows, and the focus might always be reset when entering a new flow? Controller found here:

({
init : function(component, event, helper) {
   var progressIndicator = component.find('progressIndicator');
   var componentsToCreate = [];
   for (let step of component.get('v.stages')) {
       componentsToCreate.push(["lightning:progressStep",
       {
          "aura:id": "step_" + step,
          "label": step,
          "value": step,
          "onstepfocus":component.getReference("c.onclick")
        }]);
    }
    console.log(componentsToCreate);
    var currentStep = component.get("v.currentStage");
    $A.createComponents(
        componentsToCreate,
        function(steps){
            //console.log('created steps');
            $A.createComponent(
                "lightning:progressIndicator",
        {
            //pass component attributes here
            "aura:id" : "pIndicator",
            "currentStep" : currentStep,
            "body" : steps,
            "type" : "path"
        },
        function(pInd)
        {
            component.set("v.body", pInd);
        }
    )
    })
},
onclick : function(component, event, helper){
    var stepIndex = event.getParam('index');
    //Using the index, get the step from the activeStages
    var currentStage = component.get("v.currentStage");
    var activeStages = component.get("v.stages");
    var selectedStage = activeStages[stepIndex];
    console.log('onclick works!' + stepIndex + 'stepValue' + selectedStage);
    //get currentStage index value
    var currentStageIndex = activeStages.findIndex(stage => stage === currentStage);
    //if stageclicked value < currentStage, navigate NEXT and pass output
    if(stepIndex<currentStageIndex)
        {
            component.set("v.targetStage",selectedStage);
            var navigate = component.get('v.navigateFlow');
            navigate('NEXT');
        }
}

})

Here's an example of the behavior being seen when going to next screens: enter image description here

And the console log is showing that on the new screen loading, the first step is set to focus, even when not the current stage: enter image description here

This behavior is especially gross when I don't have the onclick function commented out - as at that point it will always navigate me back to the first screen even after moving forward, due to setting the auto-focus.

Any ideas or thoughts on why the progressIndicator is always setting stepfocus to step 1 when moving between subflows?

2 Answers 2

0

You can use a aura:if with isTrue="{!v.currentStep}" which will render the progressIndicator only after currentStep be populated:

<aura:attribute name="currentStep" type="String" /> 
<aura:if isTrue="{!v.currentStep}">
    <lightning:progressIndicator currentStep="{!v.currentStep}" type="path" variant="base">
        <aura:iteration items="{!v.stepsProcess}" var="step">
            <lightning:progressStep id="{!step}" onclick="{!c.handlerStepClick}" label="{!step}" value="{!step}"/>
        </aura:iteration>
    </lightning:progressIndicator>
</aura:if>
0

For anyone else looking at this in the future, adding an empty <a> just before your lightning:progressIndicator prevents the focus shifting.

IE:

<a href=""></a>
   <lightning:progressIndicator aura:id="progressIndicator" currentStep="{!v.currentStage}"
      type="path"/>

You must log in to answer this question.

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