We have discovered a potential bug in the NavigationMixin but before opening a case with Salesforce Support I wanted to learn from the community if anybody else had the same experience and whether or not there is a workaround.
The NavigationMixin does not seem to work when used in a component which extends LightningModal. I've created a very simple reproduction which works fine when placed on a flexipage but does nothing when used in a modal dialog.
This is the test component's template:
<template>
<a href={url} onclick={handleAnchorClick}>Click me</a>
</template>
And this is the implementation:
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationMixinTest extends NavigationMixin(
LightningElement
) {
url;
async connectedCallback() {
this.url = await this.generateUrl();
}
handleAnchorClick(event) {
event.preventDefault();
this.navigate();
}
generateUrl() {
return this[NavigationMixin.GenerateUrl](this.pageReference);
}
navigate() {
this[NavigationMixin.Navigate](this.pageReference, false);
}
get pageReference() {
return {
type: 'standard__webPage',
attributes: {
url: 'https://salesforce.com',
},
};
}
}
When rendered on a flexipage, the generated url is this:
/lightning/webpage/https%3A%2F%2Fsalesforce.com
When placed in a lightning-modal component, the url is this:
javascript:void(0);
Clicking the link whilst on a flexipage opens the Salesforce website in a new browser tab. Clicking on it when in a modal does nothing.
The behaviour is consistent with Lightning Web Security both on and off.
it seems that unfortunately it wasn't solved yet
so, to call a navigation from a modal you need to add the navigation function to the modal's parent, transform the parent in 'extends navigation mixin'
then create a function on the modal component to call the parent's navigation
that's the only way I found that works right now
