Ionic 3: Fab button click not working on ios

Ionic Framework ionic-v3
1

Here is a very weird issue that I am experiencing. Fab button click doesn’t do anything on ios app. It however works like a charm on android & pc-browser.

On tapping fab button on ios app, transition/blinking is clearly visible… but fab button list doesn’t appear.

Package.json Config

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/camera": "^3.5.0",
    "@ionic-native/contacts": "^3.10.3",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/dialogs": "^3.5.0",
    "@ionic-native/file": "^3.5.0",
    "@ionic-native/image-picker": "^3.5.0",
    "@ionic-native/in-app-browser": "3.9.2",
    "@ionic-native/media-capture": "^3.6.1",
    "@ionic-native/network": "3.4.4",
    "@ionic-native/social-sharing": "^3.10.3",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angular2-moment": "1.3.3",
    "animate.css": "^3.5.2",
    "cordova-plugin-contacts": "^2.3.1",
    "cordova-plugin-x-socialsharing": "^5.1.8",
    "firebase": "3.7.8",
    "font-awesome": "^4.7.0",
    "ionic-angular": "3.0.1",
    "ionic2-auto-complete": "^1.5.0-beta",
    "ionicons": "3.0.0",
    "linqts": "1.8.1",
    "ng2-cordova-oauth": "0.0.8",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.3.6",
    "@ionic/cli-plugin-cordova": "1.2.1",
    "@ionic/cli-plugin-ionic-angular": "1.2.0",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^7.0.12",
    "angular2-template-loader": "^0.6.2",
    "html-loader": "^0.4.5",
    "jasmine": "^2.5.3",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "null-loader": "^0.1.1",
    "ts-loader": "^2.0.3",
    "typescript": "2.2.2"
  },
  "cordovaPlugins": [
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-inappbrowser"
  ],

Here is the fab button html

<ion-fab #fab>
 <button ion-fab mini no-padding icon-only clear>
   <ion-icon name="add"></ion-icon>
 </button>
  <ion-fab-list side="right">
    <button ion-fab (click)="insert('text', fab)">
      <ion-icon name="text"></ion-icon>
    </button>
    <button ion-fab (click)="insert('image', fab)">
      <ion-icon name="image"></ion-icon>
    </button>
    <button ion-fab (click)="insert('collection', fab)">
     <ion-icon name="albums"></ion-icon>
    </button>
   </ion-fab-list>
</ion-fab>

Please help!!!

4

I also tried upgrading current Ionic version from 3.0.1 to 3.3.0, but the fab list button doesn’t work on app installed on ios [iPhone 5S, iOS 10.3.2].

5

This issue is due to double ng-clicks firing on clicing ion-fab button. It got resolved by deferring second event click on iOS.

6

Hi.

Can you help me with this, I am having the same problem and I can not figure out a way of making the event fire twice.

What have you done to fix it ?

7

Create a directive for handling double clicks.

The idea is :- ASA a click is encountered, add certain “attribute” to the button element. Defer second click encountered on the same element by verifying existing attribute. Reset the element (by removing attribute) after some time (say 500ms).


import { Directive, HostListener } from "@angular/core";
import { StateService } from './app/app.service';
import { UIUtil } from './util';

@Directive({
    selector: "[ios-event-trigger]"
})

/**
 * Class {IosEventTrigger} handles event trigger directive on iOS.
 */
export class IosEventTrigger {

    /**
     * {IosEventTrigger} Constructor.
     * @param appState 
     */
    constructor(public appState: StateService) {
    }

    /**
     * Click event listener handler.
     * @param event 
     */
    @HostListener("click", ["$event"])
    public onClick(event: Event) {

        let isiOSPlatform = this.appState.isIosPlatform();

        // If this is iOS platform.
        if (isiOSPlatform) {
            let evtTarget = event.target;
            if (!UIUtil.hasAttribute(evtTarget, "ios-event-triggered")) {
                UIUtil.addAttribute(evtTarget, "ios-event-triggered", "ios-event-triggered");
                setTimeout(function () {
                    UIUtil.removeAttribute(evtTarget, "ios-event-triggered");
                }, 500);
            } else {
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
            }
        }
    }
}