From 5777ce258119d2715b1326cdc103bd4ad7612bd1 Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Tue, 6 Feb 2024 18:20:57 -0500
Subject: [PATCH] fix(react): route with redirect will mount page (#28961)

Issue number: resolves #28838

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In #28316 we resolved a longstanding misconfiguration where event
listeners being added to the page were not removed. This was due to
incorrect usage of `.bind` creating a new instance of the callback
functions.

By removing the event listener for `ionViewDidLeave`, before the
component has actually unmounted in react, resulted in the registered
destroy callback to not fire:
https://github.com/ionic-team/ionic-framework/blob/51c729eafc3b290a5daddf7f0ccffd0a2a9fe2aa/packages/react/src/contexts/IonLifeCycleContext.tsx#L208-L216
and
https://github.com/ionic-team/ionic-framework/blob/51c729eafc3b290a5daddf7f0ccffd0a2a9fe2aa/packages/react/src/routing/ViewLifeCycleManager.tsx#L21-L32

This resulted in a scenario that using a `Redirect` could cause the
wrong view to be unmounted (the entering view) and leave the user on an
empty screen.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ionViewDidEnter` event listener *is not* removed while the component
is unmounting. The browser will naturally remove the event listener when
the element node is detached from the DOM.
- Users are no longer presented with a white screen after clicking a
route that uses a redirect.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.6.7-dev.11706567011.11e782a9`
---
 packages/react/src/routing/PageManager.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/routing/PageManager.tsx b/packages/react/src/routing/PageManager.tsx
index 1ba3f94b98..19a184a636 100644
--- a/packages/react/src/routing/PageManager.tsx
+++ b/packages/react/src/routing/PageManager.tsx
@@ -54,7 +54,13 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
       this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
       this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
       this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler);
-      this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
+      /**
+       * We deliberately do not remove the `ionViewDidLeave` listener.
+       * The registered callback is used to unmount and remove the page.
+       * Removing the event listener prevents the callback from being called.
+       * The browser will automatically remove the event listener when the
+       * page element is removed from the DOM and garbage collected.
+       */
     }
   }