not working on IOS Devices

[haisumkundi]

context menu on IOS devices not being triggered for angular 4.2.4

[isaacplmann]

The context menu isn't triggered by iOS touch events. You can either trigger it yourself by listening to those events (See this part of the doc).

Or PR #68 has started work on adding touch support. Feel free to fork and contribute.

[johaven]

Even with touch support (Angular supports Hammerjs), on press or tap the contextmenu is not showed

[isaacplmann]

@johaven are you using a (longpress) listener on the item you want to trigger? If that event is fired, you should be able to use this method. If that doesn't work for you, can you show me what the event looks like?

[johaven]

@isaacplmann
Hammerjs is loaded in my setup.
Longpress event does not trigger the target function (onMyContextMenu)

<tr ...(longpress)="onMyContextMenu($event, obj)"></tr>

You can try with Chrome and emulating Ipad or Iphone.

[isaacplmann]

If onMyContextMenu is never called, that means that hammerjs is never invoking the (longpress) listener. That hasn't even reached the ngx-contextmenu library yet. I'd love to find a solution to this, but I can't really help from my end. Please report back when you figure out a configuration that works. I can put instructions here for others trying to do the same thing.

[johaven]

@isaacplmann
After a little reading, longpress is not a default event to trigger context menu.
press event fired the target function, it's ok for me on this side.
The problem now is that the context menu is not positioned on the item pressed, it is positioned at the top left of window

[isaacplmann]

@johaven
Ok, please console.log the press event and paste it in this issue. I'm using the clientX and clientY values of the event to position the context menu. My guess is that those values are not present on the PressEvent. I'll need to figure out an alternative way of getting the position.

[isaacplmann]

@johaven
Also, what did you do to get hammerjs working in your angular app? Do you have a link to documentation handy? I'll need to get that working in an app I'm working on in the next few months.s

[johaven]

@isaacplmann
To get HammerJS support on Angular you only need to install it (npm install hammerjs hammer-timejs) and load libraries into your app.module like this:

import 'hammerjs';
import 'hammer-timejs'

Angular will detect and handle this library and default events (tap, press...) will be available.
If you want to customize Hammer from Angular you can import provider (https://angular.io/api/platform-browser/HammerGestureConfig). An example:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'
export class CustomHammerConfig extends HammerGestureConfig  {
    overrides = <any>{
        'pinch': { enable: false },
        'rotate': { enable: false },
        'tap': {taps: 2}
    }
}...
{provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig},

http://hammerjs.github.io for docs :)
The event output:

[Log] Object (main.bundle.js, line 4735)
angle: 0
center: {x: 356, y: 169}
changedPointers: [MouseEvent] (1)
deltaTime: 0
deltaX: 0
deltaY: 0
direction: 1
distance: 0
eventType: 1
isFinal: false
isFirst: true
maxPointers: 1
offsetDirection: 1
overallVelocity: 0
overallVelocityX: 0
overallVelocityY: 0
pointerType: "mouse"
pointers: [MouseEvent] (1)
preventDefault: function()
returnValue: false
rotation: 0
scale: 1
srcEvent: MouseEvent {isTrusted: true, screenX: 666, screenY: 301, clientX: 356, clientY: 169, …}
target: <td>
timeStamp: 1513712391367
type: "press"
velocity: 0
velocityX: 0
velocityY: 0
Prototype Object

[isaacplmann]

So it looks like you can immediately work around the issue by passing pressEvent.srcEvent to the contextMenuService instead of pressEvent itself. I'll leave this issue open until I figure out what the best way is to differentiate between MouseEvents and HammerJS events.

[isaacplmann]

It could be that the actual touch event on a real mobile device won't have a MouseEvent as the srcEvent though. In that case you'll want to do this:

onContextMenu(pressEvent) {
  this.contextMenuService.show.next({
      contextMenu: this.contextMenu,
      event: <any>{
        clientX: pressEvent.center.x,
        clientY: pressEvent.center.y,
        target: pressEvent.target,
      },
      item: item,
  });
}

[johaven]

It's ok with srcEvent, my workaround:

onMyContextMenu(event: any) {
        this.contextMenuService.show.next({
            contextMenu: this.fileContextMenu,
            event: event.type === 'contextmenu' ? event : event.srcEvent,
            item: null
        })
    }

[johaven]

@isaacplmann
Another problem on real iphone (not simulated with chrome) when press is released context menu is closed .... Temporarily i use pressup event to avoid this behaviour.

Compilation warning with your workaround, event type does not match:

error TS2345: Argument of type '{ contextMenu: ContextMenuComponent; event: { clientX: any; clientY: any; target: any; altKey: an...' is not assignable to parameter of type 'IContextMenuClickEvent'.
  Types of property 'event' are incompatible.
    Type '{ clientX: any; clientY: any; target: any; altKey: any; }' is not assignable to type 'MouseEvent'.
      Property 'button' is missing in type '{ clientX: any; clientY: any; target: any; altKey: any; }'.

[isaacplmann]

@johaven I've updated my workaround to have <any> before the fake event object.

[johaven]

@isaacplmann i don't see any on your workaround.

[isaacplmann]

Oops, I edited your workaround

[isaacplmann]

Maybe that's better.

[johaven]

My workaround does not work on real device ... Yours it's ok !