Ionic 4 - click vs touchstart on tablets (problems with click / move configuration)

Question

We develop an Ionic 4 app that is installed in POS (point of sales) on an android tablet.

Problem is, that <ion-button (click)="doSomething"> events often get not recognised because the user stands in front of the tablet which is quite low and doesn't do a clean click, but a very small horizontal movement which ionic seems to recognise as (touch)move. This happens heavily on a cheap Samsung Tab A but also on a Samsung Tab S3.

The button actually changes it's color like touched, but it doesn't fire. This doesn't happn on the android keyboard, so the buttons on the keyboard seem more tolerant to small movements.

We have tried many combinations like

(click) tappable
tap
(click) (touchmove)
(clik) (tap)
(tap) 
(click) (touchstart)
(touchmove)
(touchstart)

The only one working is the last one. (Which can not be used in a list of elements naturally because it prevents scroll, but we can live with that).

Now I think this is a somehow dirty workaround. Is there any better solution to this issue, like configuring the tolerance of movements within a button? (In fact I would like to recognise the click as long as my finger stays in the button area, that's how it works with the angular keyboard).

Any suggestions welcome.

BTW: I can't remember having this problem so heavily on Ionic 3, but I might be wrong.

Answer 1

Try this approach to fine tune sensitivity of the "tap":

Import hammerjs in main.ts if you are using Angular 6+ (Ionic 4) and not Angular < 5.2 (where hammerjs is part of browser module):

import "hammerjs";

Create a hammer.config.ts provider:

import { Injectable } from '@angular/core';
import { HammerGestureConfig } from '@angular/platform-browser';

@Injectable()
export class MyHammerGestureConfig extends HammerGestureConfig  {
  overrides = <any> {
      'tap': { threshold: 50, posTreshold: 2, time: 2000 } // default 2, 10
      'pan': { threshold: 60, posTreshold: 2 } // default 2, 10
  };
};

In your app.module.ts do the following:

..
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { MyHammerGestureConfig } from '../providers/hammer.config';

..
providers: [
    ..
    [
      { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerGestureConfig }
    ]
  ],

Now bind your button to (tap) and then play with the thresholds to see if you can find the right balance for your users.