Mobile device, gestures - modal content is inaccesible for about a second

I’m submitting a …

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I use HammerJS for gestures. There is an event handler for press (touch & hold) and swipeleft. I’m using those events to open a modal with couple buttons. Click event of those buttons is inactive for (I think) a second, maybe half. I had to click twice after modal shows up. Same behavior if I want to dismiss a modal instantly after shows up. Also the X button in header has same behavior. If I attach same modal to a button, without gestures, just click, anywhere on the page, everything is fine.

Expected behavior It should be accesible instantly after show.

Reproduction of the problem Try interact with modal content opened by any hammerjs event.

Please tell us about your environment: Windows 10 1809, Visual Studio Code, npm, ng serve

• Smart Modal version: 0.8.x 7.1.1

• Angular version: 2.0.x 7.2.8

• Browser: 72.0.3626.121 Windows and Android

• Language: TypeScript

[troncomputers]

@maximelafarie The issue is only on mobile. You have to enable mobile view in Chrome if you’re doing this on a PC. There is no issue in normal, desktop mode. Try this modification:

  ngAfterViewInit() {
    this.ngxSmartModal.get('DocumentOptions').onOpen.subscribe(() => {
      // this.looper = setInterval(() => {
      //   document.getElementById('edit-btn').click();
      // }, 100);
    });

    this.ngxSmartModal.get('DocumentOptions').onAnyCloseEvent.subscribe(() => {
      if (!!this.looper) {
        clearInterval(this.looper);
        this.Counter = 0;
      }
    });
  }

  tap() {
    this.Counter++;
  }

  count() {
    this.Counter--;
  }

        <div class="col-12">
          <button
            id="edit-btn"
            style="border-radius:15px"
            class="btn btn-block btn-new-primary mt-2"
            (click)="count()"
            (tap)="tap()"
            >Edit</button
          >
          <button
            style="border-radius:15px"
            class="btn btn-block btn-new-primary mt-2"
                        (click)="count()"
                                    (tap)="tap()"
            >Print</button
          >
          <button
            style="border-radius:15px"
            class="btn btn-block btn-new-primary mt-2"
                        (click)="count()"
                                    (tap)="tap()"
            >Cash</button
          >
          <button
            style="border-radius:15px"
            class="btn btn-block btn-new-remove mt-2"
                        (click)="count()"
                                    (tap)="tap()"
            >Delete</button
          >
        </div>

Click/Tap immediately after modal shows up. You will see that at the second click/tap your counter will be decremented and stay on last number.

I made a short video with behavior that I have 😃 Youtube Video

[troncomputers]

Hi! @maximelafarie The example that I provided uses only hammerjs and ngx-smart-modal and its behavior is the same as in my app. I guess it might be problem with hammerjs and gestures events. I didn’t check their code but I think there is some kind of timeout for press and swipe because those events are based on how long you hold or how far you swipe. Well… I like your smart-modal so I need to try/find another gesture library or fix problems. Thx for help 👍 great job 😄