Events not emitted?

Bug Report

Ionic version: [x] 4.x

Current behavior: I was porting an old app developed with Ionic v1 to Ionic v4 and I started working using some beta. Everything was going fine, but as soon as v4 was officially released, suddenly many events in my app stopped working.

Events was simple (click)s in custom components, (ion-change) in a ion-select, or also a custom event published by a custom component. The callbacks associated to the events are just not called.

Expected behavior: I expect callbacks registered to the events to be called when the event occurs.

Steps to reproduce: I was able to reproduce the problem with a really basic example. This make me suspect there is something wrong in my specific installation, because it is so damn basic that virtually every v4 app out there could have this problem.

BTW:

1. I start a new blank project with ionic start testApp blank
2. cd testApp
3. ionic serve
4. Open the home.page.html created by ionic and add a simple footer

<ion-header>
  ...
</ion-header>

<ion-content padding>
  ...
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-buttons slot="end">
            <ion-button (ion-click)="doIt()">
                <ion-icon name="calendar"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

1. Add the doIt() method in home.page.ts

export class HomePage {
  doIt() {
    console.log('called');
  }
}

1. Wait until recompilation is done

2. Click on the calendar icon in the toolbar and… nothing is written in console

3. However if I add a button, it works:

<ion-content padding>
  <ion-button (click)="doIt()">Test me</ion-button>
</ion-content>

Related code:

The really strange thing is that in the real application I have a side menu in app.component.html like this:

<ion-menu side="start">
    <ion-content>
        <ion-list>
            <ion-item>
                <ion-label (click)="openModal1()">
                    Modal1
                </ion-label>
            </ion-item>

           <ion-item>
                <ion-label (click)="openModal2()">
                    Modal2
                </ion-label>
            </ion-item>
        </ion-list>
    </ion-content>
 </ion-menu>

with the two methods openModal1() and openModal2() defined in app.component.ts like this:

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private modalController: ModalController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  async openModal1() {
    const modal = await this.modalController.create({
      component: Modal1
    });
    return await modal.present();
  }

  async openModal2() {
    const modal = await this.modalController.create({
      component: Modal2
    });
    return await modal.present();
  }
}

The first entry works, so openModal1() runs and the modal opens (there I have the same issue but with an ion-change event of a ion-select, which is not fired), but the second enty does not: openModal2() is never called when I click on the second item.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/Users/marco/n/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.14.1 (/Users/marco/n/bin/node)
   npm    : 6.8.0
   OS     : macOS Mojave

[mpallante]

Liam, I can confirm that it is not a Ionic-related issue, but a Chrome one.

I tried my real app once again and now it seems to work. Both the (click) and (ionChange) events that were not working now work flawlessy. Moreover, after the switch from iPhone simulation to classic browser and back, it seems I never have the issue again.

At this point, I think we can close this issue. Sorry for the bother!

[mpallante]

Of course: “Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1”

I’m using Chrome 72.0.3626.119, with iPhone 6/7/8 simulation on.

But but… Something strange just happened: I disabled “toggle device toolbar” button in the inspector, going back to classic desktop browser view. I then tried to click on the button on the footer toolbar and… it worked!

Then I switched back to iPhone simulation, tried again and… still works!

Could it be a Chrome issue, then? I’m going back to check the real app, to see if this little trick works, and report back asap.