[Web]: (feature/docs) Disable the context menu from browser.

_{Since I found not no docs and no help on forums, etc. We should clarify that here:}

How to disable the context menu of the browser when right click or long press (browser, on touch press release)?

In JavaScript it's:

document.body.addEventListener('contextmenu', (evemt) => {
  event.preventDefault();
});

But how to do this in Flutter (2.x, Web)?
If this feature is missing: Here's the feature request: Implement the possibility to disable the context menu. No workaround like blocking right click, please. Because it also appears on mobile long press.

Ok, I could disable the context menu when deploy the flutter app. Because it's just an index.html with the flutter JS / Canvas etc. But how to access the html during debugging / coding?
E.g. is there a way to inject JavaScript? But note: It should also work (ignored) as native mobile app.

Btw. Flutter should disable the browser context menu by default. Because there is nothing to select. It's jsut the canvas.

@y0nd0

@y0nd0
Can you give an example or reproducible use case that shows the context menu on web and unable to disable it ?
Thanks.

@darshankawar

@darshankawar
Everywhere, the whole page. FAB or background. You can test it. Just download the latest Flutter (2.x) and run it on Web (default). You can either right click or long press in mobile mode.

This behavior does not exist on docs examples like FAB. I think it's because the editor already has the context menu disabled by JavaScript? So you have to test it locally in debug mode.

It's annoying and disallows long press. So we need to prevent the default behavior.
Note that Flutter has not DOM elements. It's just a canvas. So, there is no sense for that context menu. We should disable it by default.

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.206, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.1.0-13.0.pre.206 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 720dac5438 (2 hours ago), 2021-03-22 20:56:02 -0700
    • Engine revision d59a01d2d3
    • Dart version 2.13.0 (build 2.13.0-150.0.dev)

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.

You can import dart:html and use the same API as in JavaScript. If you are cross-compiling for non-web platforms you may need to use conditional imports, because dart:html is not available outside web.

@yjbanov

Reopening based on author's request above.

Cc: @yjbanov for further insights.

Oh, I see. You want to be able to prevent the menu for Flutter's own pointer events. That makes sense. I'm going to keep it open as a feature request.

Correct, it's only about Flutters internal behavior. No API etc. Just disable the context menu of the browser (like described above).
Flutter is rendered in a canvas. This means, with the conterxt menu, you can just e.g. save the canvas as image etc. It's not a good UX to let this context menu enabled. ...
Even if Flutter can select, copy and paste text, etc. (e.g. with SelectableText widget). In this case it's not related to the canvas. It's a separate DOM element (textarea). Means: Only disable the context menu for the canvas element which renders the app. Not on the body etc. Otherwise you cannot copy / paste text anymore. ... I think this issue is much easier than maybe expected. Just add the contextmenu event to the canvas to preventDefault. No options in my opinion. ...

It would be nice, if someone could post the code section of that canvas creation for Flutter web.
Btw. we could also thread this as bug (unexpected behavior). Because it's not really a feature. More an improvement / bugfix. The context menu is useless and annoying. Bad UX and DX (developer experience). ... So why not higher prio and bug. It's done in 5 minutes. :-) Seriously...

Yes, this is really annoying when e.g. using gestures. I would prefer to handle this issue as bug and higher priority. Especially since this can be fixed very easily and quickly. I would do it. But I don't know the source code. The line of Flutter web which creates the canvas element...

A good reason for the Flutter team: You provide tooltips on e.g. FAB buttons which are displayed on long press. But in this case you also trigger the context menu of the browser. (Web Mobile)
So this is a bug. We really should disable the context menu of the Flutter renderer canvas DOM element. :)

If this issue was fixed then I could allow users to show custom context menus on the web.

I've recently done some work on making context menus more usable in Flutter (design doc). If Web could allow us to stop showing the browser context menu for a certain widget subtree, then this would all work on Web similar to the other platforms.

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

[Web]: (feature/docs) Disable the context menu from browser. #78671

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Web]: (feature/docs) Disable the context menu from browser. #78671

Description

Activity

darshankawar commented on Mar 22, 2021

y0nd0 commented on Mar 22, 2021

darshankawar commented on Mar 23, 2021

yjbanov commented on Mar 25, 2021

4 remaining items

darshankawar commented on Mar 29, 2021

yjbanov commented on Apr 1, 2021

y0nd0 commented on Apr 3, 2021

infacto commented on Apr 9, 2021

infacto commented on Apr 9, 2021

justinmc commented on Apr 7, 2022

github-actions commented on Mar 3, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions