[pointer_interceptor_web] Fix unresponsive input above PointerInterceptor on Safari and Firefox. (#9362)

Fixes flutter/flutter#157920

### Description

When the `TextField` is placed above the `HtmlElementView`, it becomes unresponsive on Safari and Firefox. After the investigation, I found that this happens because the underlying `input`/`textarea` loses focus, leading to not listening to the keyboard input.

After some investigation, I found out that calling `preventDefault` on `mousedown` events on `PointerInterceptor` `div` element prevents the `input/textarea` from losing focus.

The same was already done for `SelectionArea` in flutter/flutter#167275

| Before | After |
| :---: | :---: |
| https://input-above-interceptor-bug.web.app | https://input-above-interceptor-fix.web.app |
| <video src="https://github.com/user-attachments/assets/3537d34d-9eb2-4a36-bbcf-4cb0de01133d" /> | <video src="https://github.com/user-attachments/assets/14458b51-bcf0-4761-9b57-7735a214125b" /> |

<details>
<summary>Application Source Code</summary>

```dart
import 'package:flutter/material.dart';
import 'package:web/web.dart' as web;
import 'package:pointer_interceptor/pointer_interceptor.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Positioned.fill(
              child: HtmlElementView.fromTagName(
                tagName: 'iframe',
                onElementCreated: (element) {
                  (element as web.HTMLIFrameElement);
                  element.src = 'https://flutter.dev';
                  element.style
                    ..border = 'none'
                    ..height = '100%'
                    ..width = '100%';
                },
              ),
            ),
            Center(
              child: PointerInterceptor(
                debug: true,
                child: Container(
                  width: 400,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.grey.shade300,
                  ),
                  padding: const EdgeInsets.all(20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      OneLineTextField(),
                      OneLineTextField(),
                      OneLineTextField(),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class OneLineTextField extends StatelessWidget {
  const OneLineTextField({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        labelText: 'One-line',
        floatingLabelBehavior: FloatingLabelBehavior.always,
      ),
    );
  }
}
```

</details>

## Pre-Review Checklist

[^1]: Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling.

Author: ksokolovskyi

packages/pointer_interceptor/pointer_interceptor_web/CHANGELOG.md

@@ -1,6 +1,7 @@
-## NEXT
+## 0.10.3
 
 * Updates minimum supported SDK version to Flutter 3.27/Dart 3.6.
+* Fixes `TextField` internal focus loss when wrapped with `PointerInterceptor`.
 
 ## 0.10.2+1
 

packages/pointer_interceptor/pointer_interceptor_web/example/integration_test/widget_test.dart

@@ -63,6 +63,29 @@ void main() {
 
       expect(element.id, 'background-html-view');
     }, semanticsEnabled: false);
+
+    // Regression test for https://github.com/flutter/flutter/issues/157920
+    testWidgets(
+      'prevents default action of mousedown events',
+      (WidgetTester tester) async {
+        await _fullyRenderApp(tester);
+
+        final web.Element element =
+            _getHtmlElementAtCenter(clickableButtonFinder, tester);
+        expect(element.tagName.toLowerCase(), 'div');
+
+        for (int i = 0; i <= 4; i++) {
+          final web.MouseEvent event = web.MouseEvent(
+            'mousedown',
+            web.MouseEventInit(button: i, cancelable: true),
+          );
+          element.dispatchEvent(event);
+          expect(event.target, element);
+          expect(event.defaultPrevented, isTrue);
+        }
+      },
+      semanticsEnabled: false,
+    );
   });
 }
 

packages/pointer_interceptor/pointer_interceptor_web/lib/pointer_interceptor_web.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:js_interop';
+
 import 'package:flutter/widgets.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 import 'package:pointer_interceptor_platform_interface/pointer_interceptor_platform_interface.dart';
@@ -17,8 +19,8 @@ class PointerInterceptorWeb extends PointerInterceptorPlatform {
   }
 
   // Slightly modify the created `element` (for `debug` mode).
-  void _onElementCreated(Object element) {
-    (element as web.HTMLElement)
+  void _debugOnElementCreated(web.HTMLElement element) {
+    element
       ..style.width = '100%'
       ..style.height = '100%'
       ..style.backgroundColor = 'rgba(255, 0, 0, .5)';
@@ -41,7 +43,21 @@ class PointerInterceptorWeb extends PointerInterceptorPlatform {
           child: HtmlElementView.fromTagName(
             tagName: 'div',
             isVisible: false,
-            onElementCreated: debug ? _onElementCreated : null,
+            onElementCreated: (Object element) {
+              element as web.HTMLElement;
+              if (debug) {
+                _debugOnElementCreated(element);
+              }
+
+              // Prevent the default action of `mousedown` events to avoid
+              // input focus loss.
+              element.addEventListener(
+                'mousedown',
+                (web.Event event) {
+                  event.preventDefault();
+                }.toJS,
+              );
+            },
           ),
         ),
         child,

packages/pointer_interceptor/pointer_interceptor_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: pointer_interceptor_web
 description: Web implementation of the pointer_interceptor plugin.
 repository: https://github.com/flutter/packages/tree/main/packages/pointer_interceptor/pointer_interceptor_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3Apointer_interceptor
-version: 0.10.2+1
+version: 0.10.3
 
 environment:
   sdk: ^3.6.0