Has anyone had any luck catching and optionally preventing navigation in the lightning experience? So for instance, if a user has unsaved data in a custom component and attempts to navigate by clicking another tab, I'd like to show a warning and optionally prevent the navigation. This behavior is native for most record edits already.
I've attempted to add a handler for the aura:location change event, and then upon confirmation preventDefault(). The trouble is, I cannot preventDefault() in the 'default' event phase. The documentation for Application events implies that I should be able to handle the event in the capture or bubble phase however neither of these trigger my event handler.
<aura:handler event="aura:locationChange" action="{!c.handleLocationChange }" phase="capture" />
//DOES NOT RUN with phase capture or bubble.
handleLocationChange : function(cmp, evt){
var confirm = confirm('You have unsaved data');
if(confirm){
evt.preventDefault();
}
}
Best Answer
They actually released a component for this fairly recently:
https://developer.salesforce.com/docs/component-library/bundle/lightning:unsavedChanges/documentation