[4.0.0-rc.1] Click events no longer work after clearing data and navigating away

[ulesta]

Bug Report

Ionic version:
[x] 4.0.0-rc1, should also occur on 4.0.0-rc2 as tap-click logic hasn't changed.

Current behavior:
When navigating away from a Page that is scrolled to the bottom (or near it), and the data is cleared, navigating to another route without animation will cause click events to be blocked.

Expected behavior:
Click events should still work after navigation.

Steps to reproduce:
Scroll to the bottom of a Page, click a button that will perform both: 1) remove the data used to render the page, and 2) trigger a navigation which causes current Page component to be destroyed.

Related code:
https://github.com/ulesta/ionic-rc1-tap-issue-repro/blob/master/src/app/tab1/tab1.page.ts

logout() {
    this.data = [];
    this.navCtrl.navigateRoot('/', { animated: false, animationDirection: 'forward' });
  }

Other information:
Tried fixing this myself but eventually fell into a rabbit hole. The gist of the issue is this: tap-click will prevent click events on the body if we are still scrolling due to a boolean flag that gets set anytime we capture an ionScrollStart or ionScrollEnd event. This is usually fine in most cases. However, the content.tsx component hooks into the native HTML onscroll attribute. When the scrollHeight of the page changes (due to less data being rendered) and we've scroll near the bottom, the onscroll attribute gets fired which triggers an ionScrollStart. However, when navigating away from this Page component, the component gets destroyed right away before it get a chance to emit ionScrollEnd hence why tap-click never unlocks the scroll lock.

I tried remedying this by calling onScrollEnd() in componentDidUnload() of content.tsx iff there is a watchdog. However, the events still don't get captured in time. I think part of the reason why this happens is because Stencil calls componentDidUnload() top-down (ion-router-outlet first, then ion-content) instead of bottom-up (ion-content, then ion-router-outlet), so by the time we call onScrollEnd() in componentDidUnload(), the event doesn't have anywhere to bubble up to.

Let me know if you all need additional info, would love to also get some clarification on some of the behaviour(s) mentioned above to satisfy my own curiosity! 😺

[1337968347]

I had a similar problem yesterday.

When I navigated with IOS Safari (android doesn't have this problem), ion-app added a click event to my body, causing my page to fail to trigger onCLick. Removing the click event on the body allows the button to trigger the click event

function onBodyClick(ev: Event) { if (cancelled || scrolling) { ev.preventDefault(); ev.stopPropagation(); cancelled = false; } }

[brandyscarney]

Possibly related to #17136

[reajuria]

Behavior is produced when you call navigateRoot or navigate without animation

    this.navCtrl.navigateRoot('/', { animated: false, animationDirection: 'forward' }); // as your code sample
    this.navCtrl.navigateRoot('/'); // wont work :/
    this.navCtrl.navigateForward('/'); // will work
    this.navCtrl.navigateBack('/'); // will work

What produces routerLink directive's click event listener be removed when navigateRoot is called?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.