Merged

Conversation

Issue number: resolves #28838

What is the current behavior?

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:

	ionViewDidLeave() {
	this.ionViewDidLeaveCallbacks.forEach((cb) => {
	const destructor = cb();
	if (cb.id) {
	this.ionViewDidLeaveDestructorCallbacks.push({ id: cb.id, destructor });
	}
	});
	this.componentCanBeDestroyed();
	}

and

	this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
	if (!this.props.mount) {
	if (this._isMounted) {
	this.setState(
	{
	show: false,
	},
	() => this.props.removeView()
	);
	}
	}
	});

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?

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?

Other information

Dev-build: 7.6.7-dev.11706567011.11e782a9