Flow Screen Component LWC - is there a way to keep variable values when navigating between screens?

Question

I'm creating a LWC Flow Screen Component.

If I create a simple one with just a text field in it, and I declare that text field as both input and output. When I navigate forward and backward within the flow, the field value is retained, which is great. Exactly how it should work.

If I do the exact same thing, but with an array (e.g. a checkbox group), the field value isn't retained when navigating backwards and forwards. e.g. If i click next then back, the checkbox group loses it's values.

Is this a limitation of Flow, or am I missing something?

html file

<template>

    <lightning-input type="text" label="Enter some text" value={customText} onchange={handleTextChange}></lightning-input>

    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={selectedValues}
                              onchange={handleCheckboxChange}></lightning-checkbox-group>

</template>

js file

import { LightningElement, api } from 'lwc';

export default class NickTestFSC extends LightningElement {

    // checkbox options
    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    }

    // private variables
    _customText;
    _selectedValues;

    // getter / setters for selected values
    @api
    get selectedValues() {
        return this._selectedValues === undefined ? [] : this._selectedValues;
    }

    set selectedValues(selectedValues) {
        this._selectedValues = selectedValues;
    }

    // getter / setters for custom text
    @api
    get customText() {
        return this._customText;
    }

    set customText(customText) {
        this._customText = customText;
    }

    // handle text change
    handleTextChange(event) {
        this.customText = event.detail.value;
    }

    // handle checkbox change
    handleCheckboxChange(e) {
        this.selectedValues = e.detail.value;
    }

}

meta definition file

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

            <!-- input & output variables -->
            <property name="customText" type="String" label="Custom Text" description="" />
            <property name="selectedValues" type="String[]" label="Selected Values" description="" />

        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Interesting note:

The reason I used custom getters/setters on the variables was so I can put a breakpoint on the setters to see them being accessed.

If I watch the variables when I click 'back' to return to the page holding this LWC, the customText setter is being called, but the selectedValues setter isn't being called.

I'm not sure if I've made a mistake somewhere, or if the flow engine is just ignoring the array variable. Maybe it only works with primitives

Answer 1

I think I've worked it out.

This issue has nothing to do with it being an array, and it's all about whether or not you provide a default value.

For some reason, if you don't provide a default value on the input, it doesn't remember your changes when you click back. This happens on either the text input, or the collection input.

e.g.

This won't work:

This will work:

This doesn't feel right to me, so wondering if this is a bug or whether there's some intention I don't understand.