Correctly implement PlatformViews' cursors on Web (flutter#174300)

dkwingsmt · web-flow · commit 8040ebc80344 · 2025-09-21T03:52:34.000Z
Fix flutter#174246 Before: https://github.com/user-attachments/assets/33d2a476-d9c4-46e1-a5c5-ea8e602060d6 After: https://github.com/user-attachments/assets/383e4a01-4b8e-4c0e-a5a4-fa0d1fc28b67 This PR is not a result of a thorough fix for mouse cursors on all platforms, but simply matching the behavior of `SelectionArea` on Web to that on non-Web. A central question lies how a platform view widget should control the mouse cursor. On the surface, the answer is simple: it doesn't, and let the view content to control (hence the `MouseCursor.uncontrolled` constant). But what if the empty region of the view content doesn't control the cursor at all? This would be a problem even on non-Web, because if neither the view content nor the view controls the cursor on non-Web, then the user will find the cursor remaining the one used by the last region, which would be different when entering and when leaving, the same bug as flutter#174246 . On the other hand, what is it supposed to fall back to if the view content doesn't define a cursor? Is the default cursor the logically correct option? ... I decided that I did not want to dig too much into the details, and instead focus on this specific issue. I tried the repro app on macOS and found that the empty region of `SelectionArea` falls back to the widget behind it, the same behavior as `MouseCursor.defer`. Therefore in this PR I made `MouseCursor.uncontrolled` essentially the same as `.defer` on Web, matching the behavior across platforms. ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [ ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] 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.  [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
diff --git a/packages/flutter/lib/src/rendering/platform_view.dart b/packages/flutter/lib/src/rendering/platform_view.dart
@@ -802,7 +802,7 @@ mixin _PlatformViewGestureMixin on RenderBox implements MouseTrackerAnnotation {
   PointerExitEventListener? get onExit => null;
 
   @override
-  MouseCursor get cursor => MouseCursor.uncontrolled;
+  MouseCursor get cursor => kIsWeb ? MouseCursor.defer : MouseCursor.uncontrolled;
 
   @override
   bool get validForMouseTracker => true;
diff --git a/packages/flutter/test/material/selection_area_test.dart b/packages/flutter/test/material/selection_area_test.dart
@@ -582,4 +582,73 @@ void main() {
     variant: TargetPlatformVariant.only(TargetPlatform.android),
     skip: kIsWeb, // [intended] on web only one selection handle can be dragged at a time.
   );
+
+  // Regression test for https://github.com/flutter/flutter/issues/174246 .
+  // This is a control case against its Web counterpart in
+  // html_element_view_test.dart.
+  testWidgets('SelectionArea applies correct mouse cursors in its empty region', (
+    WidgetTester tester,
+  ) async {
+    final GlobalKey innerRegion = GlobalKey();
+    await tester.pumpWidget(
+      MaterialApp(
+        debugShowCheckedModeBanner: false,
+        home: Scaffold(
+          // Region 1 (fullscreen)
+          body: MouseRegion(
+            cursor: SystemMouseCursors.grab,
+            child: Center(
+              child: Container(
+                decoration: BoxDecoration(border: Border.all()),
+                // Region 2 (SelectionArea)
+                child: SelectionArea(
+                  child: Padding(
+                    padding: const EdgeInsetsGeometry.all(40),
+                    // Region 3 (inner MouseRegion)
+                    child: MouseRegion(
+                      key: innerRegion,
+                      cursor: SystemMouseCursors.forbidden,
+                      onHover: (_) {},
+                      child: Container(color: const Color(0xFFAA9933), width: 200, height: 50),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    await tester.pump();
+
+    const Offset region1 = Offset(10, 10);
+    final Offset region2 = tester.getTopLeft(find.byKey(innerRegion)) - const Offset(3, 3);
+    final Offset region3 = tester.getCenter(find.byKey(innerRegion));
+
+    final TestGesture gesture = await tester.startGesture(region1, kind: PointerDeviceKind.mouse);
+    addTearDown(gesture.removePointer);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+
+    await gesture.moveTo(region2);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+
+    await gesture.moveTo(region3);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.forbidden,
+    );
+
+    await gesture.moveTo(region2);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+  }, skip: kIsWeb); // There's a Web version in html_element_view_test.dart
 }
diff --git a/packages/flutter/test/widgets/html_element_view_test.dart b/packages/flutter/test/widgets/html_element_view_test.dart
@@ -6,11 +6,12 @@
 library;
 
 import 'dart:async';
+import 'dart:ui' show PointerDeviceKind;
 import 'dart:ui_web' as ui_web;
 
+import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:web/web.dart' as web;
 
@@ -44,6 +45,17 @@ void main() {
         return web.document.createElement(params['tagName']! as String);
       },
     );
+    fakePlatformViewRegistry.registerViewFactory('Browser__WebContextMenuViewType__', (
+      int viewId, {
+      Object? params,
+    }) {
+      final web.HTMLElement htmlElement = web.document.createElement('div') as web.HTMLElement;
+      htmlElement
+        ..style.width = '100%'
+        ..style.height = '100%'
+        ..classList.add('web-selectable-region-context-menu');
+      return htmlElement;
+    });
   });
 
   group('HtmlElementView', () {
@@ -417,4 +429,81 @@ void main() {
       });
     });
   });
+
+  // Regression test for https://github.com/flutter/flutter/issues/174246
+  // There is a control case for non-Web in selection_area_test.dart.
+  testWidgets('SelectionArea applies correct mouse cursors in its empty region on Web', (
+    WidgetTester tester,
+  ) async {
+    final GlobalKey innerRegion = GlobalKey();
+    await tester.pumpWidget(
+      MaterialApp(
+        debugShowCheckedModeBanner: false,
+        home: Scaffold(
+          // Region 1 (fullscreen)
+          body: MouseRegion(
+            cursor: SystemMouseCursors.grab,
+            child: Center(
+              child: Container(
+                decoration: BoxDecoration(border: Border.all()),
+                // Region 2 (SelectionArea)
+                child: SelectionArea(
+                  child: Padding(
+                    padding: const EdgeInsetsGeometry.all(40),
+                    // Region 3 (inner MouseRegion)
+                    child: MouseRegion(
+                      key: innerRegion,
+                      cursor: SystemMouseCursors.forbidden,
+                      onHover: (_) {},
+                      child: Container(color: const Color(0xFFAA9933), width: 200, height: 50),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    // Initialize the HtmlElementView inside SelectionArea.
+    await tester.pump();
+
+    // Ensure that the HtmlElementView is initialized.
+    expect(
+      find.byWidgetPredicate(
+        (Widget widget) => widget.toString().contains('_PlatformViewPlaceHolder'),
+      ),
+      findsNothing,
+    );
+
+    const Offset region1 = Offset(10, 10);
+    final Offset region2 = tester.getTopLeft(find.byKey(innerRegion)) - const Offset(3, 3);
+    final Offset region3 = tester.getCenter(find.byKey(innerRegion));
+
+    final TestGesture gesture = await tester.startGesture(region1, kind: PointerDeviceKind.mouse);
+    addTearDown(gesture.removePointer);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+
+    await gesture.moveTo(region2);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+
+    await gesture.moveTo(region3);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.forbidden,
+    );
+
+    await gesture.moveTo(region2);
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.grab,
+    );
+  });
 }
