Using CupertinoContextMenu on a widget with onTap can trigger both simultaneously

When using CupertinoContextMenu on a widget which also has a GestureDetector with onTap, both the context menu and the other tap action (such as navigating) can be triggered at the same time. See gif:

Code example

CupertinoContextMenu(
  child: GestureDetector(
    onTap: () => Navigator.of(context).pushNamed('/photo'),
    child: Image(image: imageProvider),
  ),
),

Underlying issue

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/cupertino/context_menu.dart#L344-L348

void _onTap() {
    if (_openController.isAnimating && _openController.value < 0.5) {
      _openController.reverse();
    }
  }

If the controller already is opened more than 50%, it doesn't close. Since there's no way of detecting this from the other gesture detector, both are triggered.

Proposed solution

Always reverse the context menu onTap.

Code Sample

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Cupertino App',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino App Bar'),
      ),
      child: Center(
        child: CupertinoContextMenu(
          actions: <Widget>[
            CupertinoContextMenuAction(
              child: const Text('Action one'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            CupertinoContextMenuAction(
              child: const Text('Action two'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
          child: GestureDetector(
            onTap: () => print('onTap'),
            child:
                Image(image: NetworkImage('https://i.imgur.com/QCNbOAo.png')),
          ),
        ),
      ),
    );
  }
}

@MrAlek

Hi @MrAlek
Not able to reproduce this issue

Code Sample

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Cupertino App',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino App Bar'),
      ),
      child: Center(
        child: CupertinoContextMenu(
          actions: <Widget>[
            CupertinoContextMenuAction(
              child: const Text('Action one'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            CupertinoContextMenuAction(
              child: const Text('Action two'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
          child: GestureDetector(
            onTap: () => print('onTap'),
            child:
                Image(image: NetworkImage('https://i.imgur.com/QCNbOAo.png')),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.6 19G73, locale
    en-GB)
    • Flutter version 1.21.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision f25bd9c55c (2 weeks ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.13.0

[✓] Connected device (4 available)
    • iPhone 11 (mobile) • 7863E29F-EEE8-499E-BB28-6B111B76E3EE • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64
      • Mac OS X 10.15.6 19G73
    • Web Server (web)   • web-server                           • web-javascript
      • Flutter Tools
    • Chrome (web)       • chrome                               • web-javascript
      • Google Chrome 84.0.4147.105

• No issues found!

Without additional information, we are unfortunately not sure how to resolve this issue.
We are therefore reluctantly going to close this bug for now.
Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Using CupertinoContextMenu on a widget with `onTap` can trigger both simultaneously #52226

Code example

Underlying issue

Proposed solution

Code Sample

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using CupertinoContextMenu on a widget with onTap can trigger both simultaneously #52226

Description

Code example

Underlying issue

Proposed solution

Activity

TahaTesser commented on Mar 26, 2020

Code Sample

TahaTesser commented on Jul 31, 2020

markusaksli-nc commented on Aug 28, 2020

github-actions commented on Aug 13, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Using CupertinoContextMenu on a widget with `onTap` can trigger both simultaneously #52226