onDispose not getting called and webparts persisting between single app pages

[Greg-Hitchon]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Version 103.0.5060.66 (Official Build) (64-bit)
• SPFx version: 1.15.0
• Node.js version: 14.19.1
• created from @microsoft/generator-sharepoint

Describe the bug / error

Repo here

When navigating between two app pages the webpart does not seem to be disposed properly. This occurs only after navigation from one app page to another, and not if the webparts are contained in a "normal" modern page (with sections/columns).

In the gif below I have setup 2 app pages from the repo above (which is just out of the box from the generator + alert when rendered and alert when disposed). Each app page uses the same web part 'ondispose3' with a different description ('Instance 1', 'Instance 2').

When navigating between these using site navigation it seems onDispose is not being called. This leaves the render still happening even in a page like "Documents".

Works: 'Documents' -> 'App Page 1' -> 'Documents' -> 'App Page 2' -> 'Documents'
Does not work: 'Documents' -> 'App Page 1' -> 'App Page 2' -> 'Documents' ('App Page 1' still seems to be trying to render)

#6246 #6786 and #5227 all seemed somewhat related but do not seem to be directly applicable/solve the issue.

Steps to reproduce

1. Clone/build the repo, or create a new webpart from yo generator and add alert/console.log on render and on dispose
2. Add 2 new app pages with the webpart
3. Change the description to be unique for each
4. Add links to the pages in site navigation
5. Navigate between each like 'Documents' -> 'App Page 1' -> 'App Page 2' -> 'Documents'

Expected behavior

Webparts in the app pages should be disposed correctly between navigation and scenarios like: 'Documents' -> 'App Page 1' -> 'App Page 2' -> 'Documents' should not cause additional renders.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Greg-Hitchon]

Hello @AJIXuMuK...If you have had a chance to take a look at this could you let me know if this is indeed a bug or perhaps an unsupported scenario/something I am doing incorrectly?

[AJIXuMuK]

Hello @Greg-Hitchon - yes, the issue has been fixed internally and will be rolling out WW during the next couple of weeks.

[AJIXuMuK]

This should be rolled out WW by now.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues