(click) event not working on majority of elements on page - Ionic 4

Issue

BACKGROUND:

For some time all the click events were working for my Ionic app, then out of no where they have stopped. I have two floating action buttons that once had working click events; one would trigger a JS alert popup, and the other would open a modal.

These click events no longer work, the only elements that have working click events now are my ion-tab-buttons.

WHAT I HAVE TRIED/TESTED:

• I have tried unwrapping these elements out of ion-items and ion-lists, still no change.

• A simple ion-button as a replacement, still no change.

• Moving the ion-button outside of the card element just below the opening ion-content tag, still no change.

• Moving the ion-button outside of the ion-content; just above the tabs, still no change.

Any help is greatly appreciated.

contact.page.html

<ion-header class="navbar">
  <div class="icons">
    <ion-buttons slot="start">
      <ion-menu-button color="tertiary"></ion-menu-button>
    </ion-buttons>
    <img src="assets/logo.png" />
  </div>
</ion-header>


<ion-content text-center>

  <ion-card>
    <ion-card-header>
      <ion-card-title>Contact Us</ion-card-title>
      <ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
    </ion-card-header>
    <br>
    <ion-card-content>

      <ion-label><b>Head Office: Wembley</b>
        <br>
        Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
        DX: 51165 Wembley Park
        We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
      </ion-label>

      <br>
      <br>

      <ion-list text-left>
        <ion-item>
          <ion-label>Call us on 0800 3881 0211</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
            <ion-icon name="call"></ion-icon>
          </ion-fab-button>
        </ion-item>
        <ion-item>
          <ion-label>Email at [email protected]</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
            <ion-icon name="mail"></ion-icon>
          </ion-fab-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="about()">
      <ion-icon name="information-circle-outline"></ion-icon>
      <ion-label>About Us</ion-label>
    </ion-tab-button>
    <ion-tab-button (click)="dashboard()">
      <ion-icon color="blue" name="home"></ion-icon>
      <ion-label>Dashboard</ion-label>
    </ion-tab-button>
    <ion-tab-button class="activeTab">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Contact Us</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

contact.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { CallNumber } from '@ionic-native/call-number/ngx';
import { ModalController, AlertController } from '@ionic/angular';
import { EmailPage } from '../email/email.page';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {

  constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }

  ngOnInit() {
  }

  about() {
    console.log('clicked about')
    this.router.navigate(['members/menu/about'])
  }

  dashboard() {
    console.log('clicked dashboard')

    this.router.navigate(['members/menu/dashboard'])
  }

  async callAlert() {
    console.log('method executed')
    const callAlert = await this.alertController.create({
      message: "Are you sure you want to call Boutique Solicitors?",
      buttons: [{
        text: "Cancel",
        role: "cancel"

      },
      {
        text: "Call",
        handler: () => {this.callBS()}
      }
    ]
    });
    callAlert.present()

  }

  async callBS() {

    this.callNumber.callNumber("07847948252", false)
  .then(res => console.log('Launched dialer!', res))
  .catch(err => console.log('Error launching dialer', err))
  }

  async modalEmail() {
    const modal = await this.modalController.create ({
      component: EmailPage
    });
    modal.present();
  }

}

Solution

Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.

The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.

Tested on both Android and iOS.

Ciao ciao.

Answered By - James Slater