I also faced similar problem during exploration creation (testing)

this is one of the object stored in localStorage for story entity -

numberOfOpenedTabs - it shows the number of times that particular URL was visited not the actual count of tabs as When i refresed the count increased, but never reduces!

Possible Solutions ( wrt the orignal thought while writing it ) -

1. Rename numberOfOpenedTabs - A more accurate name could be tabOpenCount or pageVisitCount to represent the metric correctly.
2. Add Destructor Logic - We need logic to decrement the count when a tab is closed to reflect the actual number of open tabs.

Also what behaviour is expected to resolve the issue?

1. Give an option to the used to Discard changes and proceed to the page.
2. Or recover the unsaved version (Explore how we can persist unsaved changes, possibly using localStorage or sessionStorage). This requires further exploration to determine the best approach for recovering unsaved states after reload or navigation.

Hey @natashabag,
Can you suggest anyone who could help me with my doubts as mentioned above, so that I can maybe start making an approach.

Hi @ujjwalpathaak, sorry for the late reply. Thank you for digging into this and sharing your findings!

I think that the name numberOfOpenedTabs isn't really different from tabOpenCount, so I don't think we need to rename it. However, I do agree with you that we need to add destructor logic. Is there a way to do this in a foolproof way (such that we are guaranteed to call the destructor and decrement the count before the page is closed)?

I think that the general aim behind this feature is to avoid the same person making edits to the same entity in multiple tabs (which can happen by accident), so I'm not sure that either of your two suggestions at the bottom would resolve the issue (since both of them will allow editing the same entity in multiple tabs). I think a successful resolution here would ensure that the message is not shown when it is not supposed to be -- let's explore that first, and if it's not possible to do that with certainty, we could look into other options for the product behaviour.

Hope this helps, and feel free to ask if you have follow-up questions -- thanks!

Hey @seanlip,
Currently in story-editor-page.component.ts

    this.windowRef.nativeWindow.addEventListener(
      'beforeunload',
      this.onClosingStoryEditorBrowserTab
    );

is being used to bind the onClosingStoryEditorBrowserTab() func to tab closing event.

for the same thing in skill-editor-page.component.ts

    this.windowRef.nativeWindow.addEventListener('beforeunload', event => {
      this.onClosingSkillEditorBrowserTab();
    });

is being used ~ which works correctly.

I think the issue is that using a regular function in story-editor-page.component.ts causes the event to lose the component’s lexical scope. In contrast, in skill-editor-page.component.ts, the arrow function preserves the lexical scope, which keeps access to storyEditorStateService and localStorageService intact in the beforeunload event.

I used an arrow func in story-editor-page.component.ts which is giving me satisfactory results.

Have a look at the video. It shows that the feature to handle unsaved changes when closing tabs is now working well. It allows a new tab to access the page, and when I increase the tab count to 3 and then lower it to 2, the values in localStorage also update accordingly.

OK, thanks @ujjwalpathaak. I have one question: is the original issue always reproducible in the story editor with 100% certainty, or does it only happen sometimes? If the former, then your solution seems likely to be correct, but I just wanted to double-check this.

Hey @seanlip,
I only have access to macOS at the moment. I tried to reproduce the issue with - Chrome, Safari & Firefox.
The problem was consistent across all the three browsers, and the solution proposed seemed to work for em.

@ujjwalpathaak Sounds good, thanks. I'm assigning you!