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

[troncomputers]

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

[maximelafarie]

Hi @troncomputers and thank you for this well-detailed issue.

Indeed, it's strange. Can you provide a StackBlitz example please? Thus we can help you and understand your issue better 😉

Have you tried to disable modal's transition effects? It may be blocking all HammerJs interactions. 🤔

I stay tuned. 🖖

[troncomputers]

@maximelafarie Hi 😉 Here is a StackBlitz example angular-snrbnc To test this correctly you need to view this page from (F12) developer options and toggle a device toolbar. Try swipe left on red box and click anywhere to dismiss a modal or click a button quickly. I know that this is a silly problem. Propably there is no one who click that fast, but my modals acts like context menu and I'm opening them as close as possible to the pointer/finger so it can be fast, specially when someone get used to to the modal position and will know where to click fast.

[maximelafarie]

Great, thanks @troncomputers! 🤘 I'll debug it and go back to you after that. There's no silly issues, only issues that deserves to be fixed! 😉 We'll see if it's a library-related issue or not.

Stay tuned! 🖖

[maximelafarie]

Hi @troncomputers and thank you for your patience!

After a lot of checks and debug, I found that all is good for me, and it seems to be an issue that is non-related to the library. I tried again and again to click on the buttons and even if I automate it, it works perfectly. 😉

Have you some other code that may delay the execution of any function or actions?

I stay tuned! 🖖

[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 😄

[maximelafarie]

Thank you for your fast reply @troncomputers! As you said, it might come from hammerjs, but since it's a huge and famous library, I really need to investigate for a such buggy behavior from our side. 🤔 Thank you so much for the kind words! Please let me know if anything solved your issue. I stay tuned and I keep testing! 😉 You rock, thank you! 🤘🖖

[maximelafarie]

@biig-io/frontend can anybody test on the stackblitz link below? 😄

[maximelafarie]

@troncomputers Here's my fork of your StackBlitz example with some automation. Let me know if there's still a delay between hammerJs action and clicks! 😉 https://stackblitz.com/edit/angular-inup2i

[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

[maximelafarie]

@troncomputers You rock that's so cool! 🤘 Sorry but your video seems to be deleted or isn't available. 😕 I'll try to reproduce with the code you gave! 😉

[troncomputers]

Video was private, I've changed it to nonpublic. It should be ok now 😉

[maximelafarie]

Hi @troncomputers, please excuse me for the late answer! Did you find any workaround since this issue? I tried to reproduce and thanks to your record, I could see the bug! 👍

[troncomputers]

Hi @maximelafarie, I moved to Angular Material 🙈

[maximelafarie]

Haha no problem! I'll try to solve this issue anyway! 😉 Happy coding! 🖖