ICEfaces
  1. ICEfaces
  2. ICE-11300

ace:contextMenu - Menu not displayed in iOS

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-4.1.0.GA, 4.2
    • Fix Version/s: EE-4.2.0.GA
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      iOS

      Description

      When using the ace:contextMenu in iOS, the menu isn't displayed when doing a long press on where the menu should be shown. This can be reproduced by using the desktop version of Showcase on iOS.

      When doing the long press it will display the magnifier and then open a menu to copy/paste/etc the text.

      I've tested this behavior with Android/Chrome and found I get a similar menu when doing a long press on the text, but no menu is shown. If a long press is done not on text or on a button, I am able to see the contextMenu.

        Activity

        Hide
        Ken Fyten added a comment -

        This used to work on iOS, perhaps they've changed things with a newer iOS release? Needs investigation to see how this functionality can be supported on iOS.

        Show
        Ken Fyten added a comment - This used to work on iOS, perhaps they've changed things with a newer iOS release? Needs investigation to see how this functionality can be supported on iOS.
        Hide
        Mircea Toma added a comment -

        I don't think this feature ever worked in iOS. From my research I can see that the contextmenu event is not fired in iOS Safari. It's not even mentioned in the documentation.

        Show
        Mircea Toma added a comment - I don't think this feature ever worked in iOS. From my research I can see that the contextmenu event is not fired in iOS Safari. It's not even mentioned in the documentation.
        Hide
        Mircea Toma added a comment -

        Applied a fix that uses touchstart and touchend events to simulate a contextmenu event. Although this approach works the positioning of the context menu is not working correctly.

        Show
        Mircea Toma added a comment - Applied a fix that uses touchstart and touchend events to simulate a contextmenu event. Although this approach works the positioning of the context menu is not working correctly.
        Hide
        Mircea Toma added a comment -

        Track and record the touch events so that the context menu positioning can use the coordinates from the event.

        Show
        Mircea Toma added a comment - Track and record the touch events so that the context menu positioning can use the coordinates from the event.
        Hide
        Ken Fyten added a comment -

        I concur, on my iphone6s, iOS 10.3.2, I see the same thing as Liana. Only the Overview demo seems to work in showcase.

        Show
        Ken Fyten added a comment - I concur, on my iphone6s, iOS 10.3.2, I see the same thing as Liana. Only the Overview demo seems to work in showcase.
        Hide
        Ken Fyten added a comment -

        Re-open for showcase failures.

        Show
        Ken Fyten added a comment - Re-open for showcase failures.
        Hide
        Mircea Toma added a comment -

        Added touchstart/touchend callbacks also for when the targeted element is referenced by its ID.

        Show
        Mircea Toma added a comment - Added touchstart/touchend callbacks also for when the targeted element is referenced by its ID.
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r51665, Tomcat 8, ios ipad 10.3.2, iphone 6s 10.3.2. After toggling the contextMenu via long press on any of the showcase contextMenu demos, the page freezes, further interaction is no longer available. When testing on an android the app does not freeze but the context menu flashes briefly. Also failing is if the contextMenu is to be launched by long pressing on text. Only the native contextMenu is shown (copy, select all, etc)

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r51665, Tomcat 8, ios ipad 10.3.2, iphone 6s 10.3.2. After toggling the contextMenu via long press on any of the showcase contextMenu demos, the page freezes, further interaction is no longer available. When testing on an android the app does not freeze but the context menu flashes briefly. Also failing is if the contextMenu is to be launched by long pressing on text. Only the native contextMenu is shown (copy, select all, etc)
        Hide
        Mircea Toma added a comment -

        Modified 'touchstart' and 'touchend' callbacks to stop invoking Event.preventDefault to allow the browser to behave as expected.

        Running the context menu demoes on iOS show me that they work as expected with the exception of 'Delegate' demo. The 'Delegate' demo fails to work as expected in Android too.

        Show
        Mircea Toma added a comment - Modified 'touchstart' and 'touchend' callbacks to stop invoking Event.preventDefault to allow the browser to behave as expected. Running the context menu demoes on iOS show me that they work as expected with the exception of 'Delegate' demo. The 'Delegate' demo fails to work as expected in Android too.
        Hide
        Ken Fyten added a comment -

        Assign to Art to review the delegate scenario to see what can be done, if anything, to support it as well.

        Show
        Ken Fyten added a comment - Assign to Art to review the delegate scenario to see what can be done, if anything, to support it as well.
        Hide
        Arturo Zambrano added a comment -

        The delegate mode is implemented in the menu.js resource, in the ice.ace.ContextMenu function (constructor). As it can be seen in that function, the DOM event registered on the delegate container is the 'contextmenu' event. That doesn't seem to be triggered by a long press on touch devices, so the delegate mode doesn't work at all for ace:contextMenu on these devices. What could be done is to also register the same event handler on the 'touchstart' event, and we would have to do the same thing that wijmo is doing to detect a long press, which seems to consist in setting a timeout function that gets to be executed if there's a touchend event registered after certain amount of time.

        Show
        Arturo Zambrano added a comment - The delegate mode is implemented in the menu.js resource, in the ice.ace.ContextMenu function (constructor). As it can be seen in that function, the DOM event registered on the delegate container is the 'contextmenu' event. That doesn't seem to be triggered by a long press on touch devices, so the delegate mode doesn't work at all for ace:contextMenu on these devices. What could be done is to also register the same event handler on the 'touchstart' event, and we would have to do the same thing that wijmo is doing to detect a long press, which seems to consist in setting a timeout function that gets to be executed if there's a touchend event registered after certain amount of time.
        Hide
        Mircea Toma added a comment -

        Added conext menu delegate callback on 'touchstart' event in menu.js.

        Show
        Mircea Toma added a comment - Added conext menu delegate callback on 'touchstart' event in menu.js .
        Hide
        Liana Munroe added a comment - - edited

        Verified long touch ios functionality ICEfaces 4 trunk r51693, Tomcat 8, ipad ios 10.3.2 however sometimes when using a long press I end up with both the contextMenu and the native functionality such as 'select all' and 'copy'.
        When testing on android 6.0.2 nexus 5 device performing a long press over text does not always render the contextMenu, usually only the native menu appears. When the contextMenu menu finally does render it appears to flicker.

        Show
        Liana Munroe added a comment - - edited Verified long touch ios functionality ICEfaces 4 trunk r51693, Tomcat 8, ipad ios 10.3.2 however sometimes when using a long press I end up with both the contextMenu and the native functionality such as 'select all' and 'copy'. When testing on android 6.0.2 nexus 5 device performing a long press over text does not always render the contextMenu, usually only the native menu appears. When the contextMenu menu finally does render it appears to flicker.
        Hide
        Ken Fyten added a comment -

        The current behaviour is as good as we can make it with the available APIs in the mobile browser. It is unavoidable to have the native mobile OS features activating on the long press causing text selection and/or the native browser content menu to appear in addition to the ace:contextMenu. If we attempt to block the native events to prevent the native features such as pinch to resize and drag to scroll from working as well, which is unacceptable. The main thing is that the user IS able to present the ace:contextMenu and activate a menu item.

        Show
        Ken Fyten added a comment - The current behaviour is as good as we can make it with the available APIs in the mobile browser. It is unavoidable to have the native mobile OS features activating on the long press causing text selection and/or the native browser content menu to appear in addition to the ace:contextMenu. If we attempt to block the native events to prevent the native features such as pinch to resize and drag to scroll from working as well, which is unacceptable. The main thing is that the user IS able to present the ace:contextMenu and activate a menu item.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: