Skip to content

Commit cbfa2e2

Browse files
[web] Set pointer-events: none for img-element-backed images (flutter#177418)
This stops the context menu from showing up when you right click on an image that is backed by an <img> element. Fixes internal issue ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
1 parent 74c101b commit cbfa2e2

File tree

3 files changed

+23
-1
lines changed

3 files changed

+23
-1
lines changed

packages/flutter/lib/src/web.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ extension type CSSStyleDeclaration._(JSObject _) implements JSObject {
4242
external String get height;
4343
external set width(String value);
4444
external String get width;
45+
external set pointerEvents(String value);
46+
external String get pointerEvents;
4547
}
4648

4749
extension type CSSStyleSheet._(JSObject _) implements JSObject {

packages/flutter/lib/src/widgets/_web_image_web.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ class ImgElementPlatformView extends StatelessWidget {
4242
// Set `width` and `height`, otherwise the engine will issue a warning.
4343
img.style
4444
..width = '100%'
45-
..height = '100%';
45+
..height = '100%'
46+
..pointerEvents = 'none';
4647
return img;
4748
});
4849
}

packages/flutter/test/painting/_network_image_test_web.dart

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,6 +471,25 @@ void runTests() {
471471
expect(imgElement.style.height, '100%');
472472
});
473473

474+
testWidgets('Creates an <img> with pointer-events: none', (WidgetTester tester) async {
475+
final TestImgElement testImg = TestImgElement();
476+
testImg.src = _uniqueUrl(tester.testDescription);
477+
478+
final _TestImageStreamCompleter streamCompleter = _TestImageStreamCompleter();
479+
final _TestImageProvider imageProvider = _TestImageProvider(streamCompleter: streamCompleter);
480+
481+
await tester.pumpWidget(Image(image: imageProvider));
482+
streamCompleter.setData(
483+
imageInfo: WebImageInfo(testImg.getMock() as web_shim.HTMLImageElement),
484+
);
485+
await tester.pumpAndSettle();
486+
final FakePlatformView imgElementPlatformView = fakePlatformViewRegistry.views.single;
487+
expect(imgElementPlatformView.htmlElement, isA<web.HTMLImageElement>());
488+
final web.HTMLImageElement imgElement =
489+
imgElementPlatformView.htmlElement as web.HTMLImageElement;
490+
expect(imgElement.style.pointerEvents, 'none');
491+
});
492+
474493
group('RenderWebImage', () {
475494
testWidgets('BoxFit.contain centers and sizes the image correctly', (
476495
WidgetTester tester,

0 commit comments

Comments
 (0)