Issue with LWC Flow Navigation

Question

I have an LWC embedded in a flow that has a custom footer. Whenever to click on the custom buttons to navigate the next screen, I get the following error:

Uncaught Action failed: flowruntime:flowRuntime$controller$handleNavigate [The 'NEXT' navigation option isn't supported on this screen. Replace it with one of the available navigation options: FINISH.]

Not sure how or why I am getting the error when the 'NEXT' option is in this.availableActions. The flow navigates to the next screen but I still get the error. The weirdest part is that it complains about the opposite if I try to use 'FINISH'.

Here is the snippet of the code:

let navigationEvent;

if (this.availableActions.find(action => action === "FINISH")) {
    navigationEvent = new FlowNavigationFinishEvent();
} else if (this.availableActions.find(action => action === "NEXT")) {
    navigationEvent = new FlowNavigationNextEvent();
}

try {
    this.dispatchEvent(navigationEvent);
} catch (e) {
    console.log(e);
}

Answer 1

Not sure if you are still looking for answer to this question but using documentation provided here: https://developer.salesforce.com/docs/component-library/bundle/lightning-flow-support/documentation

I was able to make flow actions work using following code:

    handleButtonClick(event) {
        var actionClicked = event.target.name;
        var navigationEvent;
    
        if (actionClicked === 'Next') {
            navigationEvent = new FlowNavigationNextEvent();
        } else if (actionClicked === 'Finish') {
            navigationEvent = new FlowNavigationFinishEvent();
        } else if (actionClicked === 'Pause') {
            navigationEvent = new FlowNavigationPauseEvent();
        } else if (actionClicked === 'Back') {
            navigationEvent = new FlowNavigationBackEvent();
        }
    
        try {
            this.dispatchEvent(navigationEvent);
        } catch (ex) {
            console.log('Exception: ' + ex);
        }
    }

Call above JS function on button click and pass in name. Your button should look like:

    <button onclick={handleButtonClick} id="Back" name="Back" title="Back">Back</button>

Hope this helps.

Answer 2

You'll still need to have the navigation options you want to fire selected in the navigation options