Context menu long press not functioning on iPads

[Syed Wali]

Hello, 

We have a DataGrid control which has a ContextMenu with some options. The ContextMenu works fine on all desktop browsers on right click. The same works fine on mobile devices with tap and hold to show the ContextMenu, except for Safari on iPad.

From our understanding, Safari on iPadOS requests a desktop version of sites instead of a mobile version and as such, touch events from the Syncfusion library are not applicable. If we adjust the settings in Safari to get the Mobile version of our site, tap and hold ContextMenu works fine then.

This is replicable on your documentation page for the ASPNetCore DataGrid ContextMenu control - https://ej2.syncfusion.com/aspnetcore/Grid/ContextMenu 

Can a property be provided on the DataGrid such that we could force the touch controls from the Application side?

Thanks, 

Syed 

[Sujith Kumar Rajkumar]

Hi Syed, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that you are facing problem on opening context menu in ipad. We are currently validating this problem from our end and we will provide the further details on 11^th August 2021. 

 

Until then we appreciate your patience. 

 

Regards, 

Sujith R 

[Sujith Kumar Rajkumar]

Hi Syed,

Thanks for your patience.

We checked your query and were able to reproduce the reported problem (Context menu not getting opened in Ipad device) from our end. On further validation we suspect that the cause of this issue is related to IOS update. Please refer to the below common forum links where this issue is discussed,

https://discussions.apple.com/thread/7971897

https://developer.apple.com/forums/thread/7213

https://developer.apple.com/forums/thread/120345

https://github.com/isaacplmann/ngx-contextmenu/issues/77

So we suggest you to resolve this problem by using a workaround with the touchStart and touchEnd events and open the context menu dynamically using open method.

Please refer to the below code snippet and reference sample(prepared in JS) for more information,

var timer;

var touchduration = 500;

var touchEventArgs;

var contextMenuOpenFn;

// Grid’s created event handler

function onCreated() {

// Since the Grid element is the context menu’s target, the events are bound to the Grid element

grid.element.addEventListener('touchstart', touchstart.bind(this), false);

grid.element.addEventListener('touchend', touchend.bind(this), false);

// The Grid context menu’s beforeOpen event is stored in a global variable

contextMenuOpenFn = grid.contextMenuModule.contextMenu.beforeOpen;

// The Grid context menu’s beforeOpen event is overridden

grid.contextMenuModule.contextMenu.beforeOpen = function (e) {

// The Grid context menu’s beforeOpen event is overridden in order to pass the touch event arguments to is

// The event arguments stored from ‘onlongtouch’ event(can be checked below) is stored to the event property and the source method(stored in the global variable) is called

e.event = (e.event) ? e.event : touchEventArgs;

contextMenuOpenFn.call(this, e)

}

}

// Grid element’s ‘touchstart’ event handler

function touchstart(e) {

e.preventDefault();

if (!timer) {

timer = setTimeout(onlongtouch.bind(this, e), touchduration);

}

}

// Grid element’s ‘touchend’ event handler

function touchend(e) {

if (timer) {

clearTimeout(timer);

timer = null;

}

}

// Event will be triggered on long touch

function onlongtouch(e, e1) {

timer = null;

// The touch event arguments are stored in a global variable

touchEventArgs = e;

// the Grid’s context menu is opened with the target positions

grid.contextMenuModule.contextMenu.open(e.touches[0].pageY, e.touches[0].pageX);

};

Sample: https://stackblitz.com/edit/react-juqdz2-wbgqv2

Let us know if you have any concerns.

Regards,

Sujith R