[SalesForce] Lightning Web Component within a Flow does not accept updated input variable on “next”

I'm trying to understand whether this is expected or buggy behavior when using a flow to pass data into a lightning web component. It seem buggy to me since there is something trying to cache input values without an override option.

Setup: Flow with two screen components and an assignment login inbetween.
Basic Flow

First screen component has an input textbox and an associated text variable.
Screen 1

Second screen component has a LWC that accepts the variable as an input and also passes any LWC output back into the same variable.
enter image description here

The assignment logic
enter image description here

When you initially run the flow in debug, you can set the text input to some text, click "Next" and the LWC displays the value that you entered.
If you then use the "Previous" and change your initial text input to something else, then hit "Next" on screen 1 again, the flow has the new value, but the LWC does not see the updated input.

First Pass:
enter image description here

Second Pass using "Previous":
enter image description here

However, if you use the "Next with Previous checkbox chosen" to loop back around to Screen #1 and change the input, it works.
enter image description here

Here is the LWC code

js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="txtBoxVal" type="String"  /> 
        </targetConfig>
    </targetConfigs>

</LightningComponentBundle>

html

<template>
<lightning-card title="Lightning Web Component For Flow" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
            <lightning-input label="Message To Send" type="text" value={_txtBoxVal} onchange={handleChange}></lightning-input>
            <br /> 
            <lightning-button label="Publish Attribute" onclick={handleClick}></lightning-button>
            <lightning-button label="Navigate to Next" variant="brand" onclick={handleNext} ></lightning-button> 
    </div>
</lightning-card>

javascript

    import { LightningElement , track, api} from 'lwc';
    import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning/flowSupport';
  

export default class LwcTextBoxExample extends LightningElement {
   @track _txtBoxVal = '';
   @api availableActions = [];
    

    @api 
    get txtBoxVal(){
        return this._txtBoxVal;
    }

    set txtBoxVal(val){
        this._txtBoxVal = val;
    }

    handleChange(event) { 
        this._txtBoxVal = event.target.value; 
    }

    //Change attribute on Flow
    handleClick(event) {   
        const attributeChangeEvent = new FlowAttributeChangeEvent('txtBoxVal', this._txtBoxVal); 
        this.dispatchEvent(attributeChangeEvent);   
    }

    //Hook to Flow's Validation engine
    @api
    validate() {
        if(!this._txtBoxVal.includes('oracle')) { 
            return { isValid: true }; 
            }  
        //If the component is invalid, return the isValid parameter as false and return an error message. 
        return { 
            isValid: false, 
            errorMessage:  'You cannot have string oracle in String' 
            };  
    }

     //Go to Next screen of Flow
    handleNext(event){ 
       const nextNavigationEvent = new FlowNavigationNextEvent();
       this.dispatchEvent(nextNavigationEvent); 
    } 
}

Best Answer

Sigh. Yeah, this is currently the way it works. Basically the design optimizes for a use case where the customer doesn't want to have to retype in values when they return to the screen. You can work around this by:

  1. make sure you check "Manually assign variables (advanced)"
  2. make sure that you are not assigning the same variable to both the input and output of the attribute.

If this is unclear, there's much deeper explanation here

We (Salesforce) are working on improving this.

Related Topic