Prevent Visual Flow Screen from Clearing When Clicking Next

Question

I have a visual flow screen with a mix of out-of-the-box and custom Lightning Web Components on it. Some of the OOTB components are marked required and one of the LWCs has a validate() method that gets called when the "Next" button is clicked to validate the content of the LWC.

The validate method works as intended, but it clears out all of the properties of the LWC when the component is invalid. This will be a giant pain for users because there are about 12 fields to fill out on the component.

What is the proper way to maintain the values in the component when the Next button is clicked (or the FlowNavigationNextEvent event is dispatched)? Is this a limitation of Flows? Is it best to try to validate on the fly before the Next event is dispatched if that's the limiting factor?

Update: Code

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

export default class ConsultancyOwner extends LightningElement {

    @api
    get ownerName() {
        return this._ownerName;
    }

    set ownerName(name) {
        this._ownerName = name;
    }

    @api
    get countriesOfCitizenship() {
        return this._countriesOfCitizenship;
    }

    set countriesOfCitizenship(countries) {
        this._countriesOfCitizenship = countries;
    }

    @api
    validate() {
        if(this._ownerName && !this._countriesOfCitizenship) {
            return {
                isValid: false,
                errorMessage: 'You must specify country(ies) of citizenship'
            };
        } else {
            return {
                isValid: true
            };
        }
    }

    handleOwnerNameChange(event) {
        this._ownerName = event.detail.value;
        // notify the flow of the change
        const attributeChangeEvent = new FlowAttributeChangeEvent('ownerName', this._ownerName);
        this.dispatchEvent(attributeChangeEvent);
    }

    handleCountriesChange(event) {
        this._countriesOfCitizenship = event.detail.value;
        // notify the flow of the change
        const attributeChangeEvent = new FlowAttributeChangeEvent('countriesOfCitizenship', this._countriesOfCitizenship);
        this.dispatchEvent(attributeChangeEvent);
    }

}

<template>
    <div class="slds-grid slds-gutters slds-wrap slds-grid_vertical-align-end">
        <div class="slds-col slds-col-size_1-of-2">
            <lightning-input 
                label="Full Name"
                onchange={handleOwnerNameChange}
                type="text">
            </lightning-input>
        </div>
        <div class="slds-col slds-col-size_1-of-2">
            <lightning-input 
                type="text" 
                name="countries" 
                onchange={handleCountriesChange}
                label="Country(ies) of Citizenship">
            </lightning-input>
        </div>
    </div>
</template>

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

    <masterLabel>Consultancy Owner</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="ownerName" type="String" />
            <property name="countriesOfCitizenship" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Answer 1

At time of writing, you need to raise the FlowAttributeChangeEvent on the outputs and also write the outputs back to an/the input, pick them up with a connectedCallback and put them back to where they need to be. In my case I didn't set the role on them so it would write back to where it was coming out from. Feels like it shouldn't work as it looks like using variables before theyre set, but it does.