Touch happens but sometimes does not trigger click events

Ionic Framework ionic-v3
1

Hi all

I have a strange problem and I required your help.

In my app sometimes the buttons are touched (they display the animations) but the click events aren’t triggered. This is particularly visible on the segment buttons, but happens on others as well (such as the menu toggle). I have to touch again several times and sometimes I even have to click somewhere else and click again on the desired button to make it work.

It compromises UX greatly.

Happens both on the browser and on the android device (nexus 5x).

Anyone can help?

Thank you

2

Could you please show use the contents of your package.json and the template/class corresponding with this issue?

3

Hello

Here goes! It was already happening with ionic 2 btw! And also with Tabs instead of Segments.

{
  "name": "testApp",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "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.4.4",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/device": "^3.4.4",
    "@ionic-native/diagnostic": "^3.4.4",
    "@ionic-native/file": "^3.4.4",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angularfire2": "^2.0.0-beta.8",
    "firebase": "^3.7.5",
    "install": "^0.8.8",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "npm": "^4.5.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "@ionic/cli-build-ionic-angular": "0.0.4",
    "@ionic/cli-plugin-cordova": "0.0.10",
    "typescript": "~2.2.1"
  },
  "version": "0.0.1",
  "description": "testApp"
}

This segment, for instance:

<ion-header>
	<ion-navbar color="primary">
		<button ion-button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>Tasting Sheet</ion-title>
		<ion-buttons end>
			<button ion-button icon-only (click)="delete()">
        		<ion-icon name="trash"></ion-icon>
      		</button>
		</ion-buttons>
	</ion-navbar>

	<ion-segment [(ngModel)]="section" color="primary">
		<ion-segment-button value="a">
			<ion-icon name="create"></ion-icon>
		</ion-segment-button>
		<ion-segment-button value="b">
			<ion-icon name="eye"></ion-icon>
		</ion-segment-button>
		<ion-segment-button value="c">
			<ion-icon name="rose"></ion-icon>
		</ion-segment-button>
		<ion-segment-button value="d">
			<ion-icon name="pint"></ion-icon>
		</ion-segment-button>
	</ion-segment>

</ion-header>

<ion-content>
	<div [ngSwitch]="section">

Thanks

4

Doesn’t seem out of the ordinary to me. Differences between Android and iOS? Because on iOS i’ve noticed these ‘ghost’ clicks on a segment before (it stays lightly colored).

5

I have just tried in Android and in the browser. You mean iOS when in the browser?

6

I meant on the device. Because I’ve never encountered issues with ion-segments and strange behaviour on Android. On iOS I did see something like a ‘hanging’ segment-button, but I’m pretty sure the click handler wasn’t called and it was more of a CSS thing.

7

I thought I was the only one, got that on my segment buttons too!

Sometimes it’s touched but not clicked, I notice that behavior because, when not active, my segment button are grey. When active their are pink. But, when this occurs, not frequently hopefully, click is not triggered and segment button end up in a light-grey-pink-color I didn’t defined in my css.

Or I had them till Ionic 3.1.1, I didn’t tested that specially since then, maybe I have too.

1 Like
8

Could you reproduce this problem often? Do you have a public repo?

9

Unfortunatly i don’t have a public repo. But I can tell you it happened with a previous app so either I’m doing the same mistake or there is something wrong by default.

10

I tried to reproduce it, but couldn’t. I gonna keep a look at it and if I could the next days will comment here.

In the meantime, would you like to try to update to Ionic 3.1.1 and try again?

11

Will do it when i get home! Thanks!

12

Hi Avalio, I also have this problem, did you get a solution?

13

Didn’t get it anymore with newer versions.

14

What Versions do you use now then?
I am using ionic-cli 3.19
ionic version 3.9.2 (latest)
And I still get this behaviour in iOS. Any suggestions on what to update?

Thanks!

15

I use different versions in different apps. But the problem with me was in android, not in IOs.

16

I had similar issues with ionic segments and buttons not triggering a change (only happened on a device) and found it to be a zone/change detection issue. This is what we ended up doing to fix it:

In the template, add the ionChange event:

<ion-segment [(ngModel)]="section" (ionChange)="segmentChanged($event)">

in the class, add the NgZone import:

import {NgZone} from '@angular/core';

and update constructor…

constructor(private zone: NgZone,

then create a segmentChanged function that sets the “section” variable within the zone:

public segmentChanged(event) {
        console.log("Segment clicked! " + event.value, this, event);
        this.zone.run(() => {
            this.section = event.value;
        });
    }
4 Likes
17

I am seeing the same issue! It works normal for me then when i load a page that loads google map and then i close out of it and it destroys google map and i go to a different page and then all of a sudden touch does not work and i cant navigate the app anymore. Any ideas whats causing this?

1 Like
18

i am facing the same issue

19

Fixed it with the help of below link