[pointer_interceptor_web] Fix unresponsive input above PointerInterceptor on Safari and Firefox.

[ksokolovskyi]

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
bug.mov	fix.mov

Application Source Code

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,
      ),
    );
  }
}

Pre-Review Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter.
• I signed the CLA.
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I linked to at least one issue that this PR fixes in the description above.
• I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy, or I have commented below to indicate which version change exemption this PR falls under¹.
• I updated CHANGELOG.md to add a description of the change, following repository CHANGELOG style, or I have commented below to indicate which CHANGELOG exemption this PR falls under¹.
• I updated/added any relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or I have commented below to indicate which test exemption this PR falls under¹.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Footnotes

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. ↩ ↩² ↩³

[stuartmorgan-g]

This should be reviewed by web experts. /cc @mdebbar to find an appropriate reviewer.

[mdebbar]

[mdebbar]

nit: let's do the type casting only once:

Suggested change

	onElementCreated: (Object element) {
	if (debug) {
	_debugOnElementCreated(element);
	}
	// Prevent the default action of `mousedown` events to avoid
	// input focus loss.
	(element as web.HTMLElement).addEventListener(
	'mousedown',
	(web.Event event) {
	event.preventDefault();
	}.toJS,
	);
	},
	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,
	);
	},

And _debugOnElementCreated can be changed to:

  void _debugOnElementCreated(Object element) {
    element.style
      ..width = '100%'
      ..height = '100%'
      ..backgroundColor = 'rgba(255, 0, 0, .5)';
  }

[ksokolovskyi]

@mdebbar thanks a lot for the review!

@stuartmorgan-g, I haven't updated the version in this PR and added the change into the ## NEXT section right after non-released changes related to the Flutter/Dart version constraints update. Could you please suggest how to proceed properly with the version update?

[stuartmorgan-g]

Could you please suggest how to proceed properly with the version update?

I'm not sure what you mean by "how to proceed". Are you asking what kind of version bump this should be?

[ksokolovskyi]

I'm not sure what you mean by "how to proceed". Are you asking what kind of version bump this should be?

@stuartmorgan-g, there are some unreleased changes already, so I added mine to the ## NEXT section of the changelog next to them. I am unsure whether I need to bump the version in this PR, or if it will be updated and released later.

[stuartmorgan-g]

I am unsure whether I need to bump the version in this PR, or if it will be updated and released later.

Could you let me know what part of our policy (linked from the PR checklist) isn't clear as applied to this PR, so I can clarify it?

[ksokolovskyi]

@stuartmorgan-g Sorry, I reread the docs and figured everything out.