Click/tap selection not working when used in Polymer/shadow-dom

[mpilone]

I ran into this issue a long while back while working with VisJs Timeline. At the time I was able to work around the issue by modifying Hammer to generate an event with a different target but I'm not sure that is the right approach.

The root issue is that when you use Timeline in a Polymer element, single click selection doesn't work while long press selection does. It looks like the target element in the event is different for the events generated by Hammer but I don't understand why. I originally thought this was a Hammer issue, but after creating a test case and a bug with that project, it appears that it is behaving correctly.

When I debug the Timeline, I get a call to _onSelectItem in ItemSet.js but the event target is "vis-timeline vis-bottom vis-ltr" while _onMultiSelectItem gets an event target of "vis-item-overflow".

I can't seem to figure out why the two targets are different given that they are being generated by the same Hammer instance created around line 280 this.hammer = new Hammer(this.body.dom.centerContainer);. I noticed that a tap event is also registered against the groupHammer a few lines later while a press is not so maybe that is involved somehow. Timeline is also using propagating-hammer so maybe that is also throwing something into the mix.

I'm testing with:

• Firefox 69.0.1
• Timeline 5.1.0 (although the same problem seems to exist in master)
• MacOS 10.14.6

I attached a simple test case using the Polymer starter project. Just run npm install && polymer serve. The super simple example shows single click/tap not selecting while long click/press will select and item.

start-polymer3-timeline.zip

[mpilone]

I kept digging on this and it may be related to naver/hammer.js#21. If that is the root cause then this probably isn't a Timeline issue but a Hammer issue.

[yotamberk]

Can you try playing around with the press and tap event registering and see if this really is the cause?

[mpilone]

I confirmed that this was an issue with Hammer when used in shadow-dom. I tested the fix to naver/hammer.js#21 in version 2.0.16 with the latest timeline master and it resolves the issue.

I'm going to close this ticket but Timeline needs to update to "@egjs/hammerjs": "2.0.16" to include the fix. Would it be possible to get that version bumped in a future release? Thanks.