ContextMenu access on iPad

[chiralsystems]

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

[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior

ContextMenu is not accessible when using viewing a primereact 6.3.1 application. The contextMenu is attached to a DataTable. The show case example for contextMenu does not work either

Expected behavior
contextMenu should be displayed on tap long hold

Minimal reproduction of the problem with instructions
Tap long hold on showcase contextmenu example. No contextmenu is shown

Please tell us about your environment:
IOS 14.4.2 iPad

• React version:
  16.8.0

• PrimeReact version:
  6.3.1

• Browser:
  iOS XX Safari iOS Chrome

• Language:

ES6

[mertsincan]

Hi,

This is an issue with iOS wherein it does not trigger the contextmenu event on the underlying element. Please see;
https://stackoverflow.com/questions/29228999/jquery-contextmenu-event-not-working-in-ios-8-2/33778163#33778163
There are many issues like this. We use onContextMenu event in our all contextmenu demo pages. Exp;
https://primefaces.org/primereact/showcase/#/contextmenu

<div className="card">
   <ContextMenu model={items} ref={cm}></ContextMenu>

   <img onContextMenu={(e) => cm.current.show(e)} .../> // This <img> element is entirely a user-defined element.
</div>

Therefore, maybe you can simulate contextmenu event using touchstart, touchmove and touchend events.
Best Regards,

[melloware]

Here is a great component you could use: https://github.com/minwork/use-long-press

Something like...

import React from 'react';
import { useLongPress } from 'use-long-press';

const Example = () => {
  const cm = useRef(null);

  const bind = useLongPress(() => {
    console.log('Long pressed!');
   cm.current.show(e)
  });

  return (
        <ContextMenu model={items} ref={cm}></ContextMenu>
        <img {...bind()} />
   }
};