[BUG] DIV click events not being executed

[khoying]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior I added @ng-idle to an existing project. Now that I have, I have DIVs that have click handlers attached that are no longer being triggered.

Expected behavior The click event could be triggered

Minimal reproduction of the problem with instructions The HTML is pretty simple: <div class="result-item" (click)="viewDetails();"></div>

Constructor from my App Component: `constructor(private router: Router, private messageService: MessageService, private metaDataService: MetaDataService, private idle: Idle, private keepalive: Keepalive) {

    idle.setIdle(Properties.SETTINGS.idle.idleTimeSec);
    idle.setTimeout(Properties.SETTINGS.idle.idleTimeoutSec);
    idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    idle.onIdleEnd.subscribe(() => {
        this.keepalive.ping();
        this.messageService.removeMessage(Properties.MESSAGES.core.inactiveWarning.id);
    });
    idle.onTimeoutWarning.subscribe((countdown) => {
        this.messageService.addMessage((Properties.MESSAGES.core.inactiveWarning).resolveMessage([Math.floor(countdown / 60) + ""]))
    });

    keepalive.request(Properties.URLS.core.keepAlive.href);
    idle.setKeepaliveEnabled(false);

    idle.watch();
}`

Please tell us about your environment:

• @ng-idle version: 2.x I am using ng-idle version 2.0.0-beta.13

• Angular version: 2.x I am using Angular version 5.2.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] I am having the same issue with both FireFox(45.4.0) and Chrome (63.0.3239.132).

• Language: [all | TypeScript X.X | ES6/7 | ES5] I am using TypeScript version 2.6.2 Target is ES5

• Node: node --version = I am using Node version 8.9.1

[khoying]

The DIV I reported above in the original report is actually a little more complicated. It contains some DIV and elements inside of it. It looks like:

<div class="result-item" (click)="viewDetails();">
    <div class="result-data">
        <div class="result-top-row">
            <div class="result-pa-image img-pa"
                [class.img-pa-none]="ContractHelper.hasNoPriceActivations(contract)"
                [class.img-pa-single]="!ContractHelper.hasNoPriceActivations(contract)"></div>
        </div>
        <div>
            <div class="result-desc">{{contract.contractDescription}}</div>
            <div class="result-vndr result-vndr-nme">{{contract.contractVendorName}}</div>
            <div class="result-contract-nbr">{{contract.externalContractNumber}}</div>
        </div>
        <div style="clear: both; height: 1px;">&nbsp;</div>
    </div>
</div>

I started to play around a little bit and create my own Interrupt. I think the problem occurs if more than one of the events the interrupt is looking for happens at the same time.

[moribvndvs]

I think the problem occurs if more than one of the events the interrupt is looking for happens at the same time.

Ahh, now that's interesting. What events do you have configured, and which do you think are happening simultaneously when this seems to occur (other than click, obviously)?

[khoying]

I am trying to isolate the events by adding different combinations from the default. I am still trying to get something consistent but mousedown and mousemove seem to be part of it. Also wondering if the issue is also with some sort of conflict with whatever listener that Angular is applying for the (click) event.

[khoying]

I have noticed that if I just include a "mousemove" DocumentInterruptSource and then click on the DIV while moving the mouse nothing happens. The click event does not fire. However, without interrupts if I do the same thing, the click event does fire on the DIV.

[khoying]

I have been able to isolate the issue to the "mousedown" document interrupt.

If I remove the "mousedown" and leave all the others ("mousemove", "keydown", "DOMMouseScroll", "mousewheel", "touchstart", "touchmove", "scroll") the click event works (as long as the mouse is still).

If leave the "mousedown" and remove all of the others ("mousemove", "keydown", "DOMMouseScroll", "mousewheel", "touchstart", "touchmove", "scroll") the click event does NOT work.

[moribvndvs]

OK. One thing that's different between this and the original ng-idle is here we use Observable.fromEvent and I (as far as I know) am required to create observables from each event (so, split the original string and create an observable for each element). I fail to see why that would prevent the event from bubbling. I can clean things up a little by rewriting that routine using Observable.merge rather than keeping a separate array of subscriptions, but again I don't know why that would matter.

Hail mary throw here, but if you use new DocumentInterruptSource('<your events here>', { passive: true }) as your source, does that change anything?

[khoying]

I did try that. Did not seem to help. I also tried setting the throttleDelay to 0.

For now I am removing the mousedown and the mousemove (having to keep a sensitive mouse perfectly still to click is tough after that second cup of coffee :-) )

[wesley-trantham]

Alternative workaround - use (mouseup) instead of (click).

For me this happened in a <li> click event inside of a ngFor loop. I'd love to reproduce the code for you but the same logic was working in multiple other components.

[moribvndvs]

Hopefully fixed by #88