Web - Fix selection jump on Chrome for Android

[bleroux]

Description

This PR fixes cursor jump on Chrome for Android when the user taps in a multiline TextField.

Using the following code sample:

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Text Field Focus',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatelessWidget {
  const MyCustomForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Field Focus'),
      ),
      backgroundColor: Colors.amber,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          decoration: const InputDecoration(
            fillColor: Colors.white,
            filled: true
          ),
          autofocus: true,
          maxLines: 3,
          controller: TextEditingController(text: '1\n2\n3\n4\n'),
        ),
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

On a mobile browser, once the page is loaded, tap after the number 3:

• Before this PR: the TextField content is automaticaly scrolled and the selection is set after number 1.

Enregistrement.de.l.ecran.2023-04-14.a.15.03.16.mov

Implementation

A multiline TextField relies on an HTML <textarea> elements. When a tap occurs the selection should be updated from Flutter not by the HTML element itself.
This PR prevents mouse events on Chrome for Android. Those events conflicts with Flutter selection changes.
Previously, mouse events were only prevented on desktop but they are also emitted on mobile, see https://bugs.chromium.org/p/chromium/issues/detail?id=119216#c11.

Related Issue

Related to flutter/flutter#124483 (partial fix because the issue is also reproducible on iOS/Safari).

Tests

Adds 1 test.

[flutter-dashboard]

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

[kevmoo]

Thanks for doing the tweaks here!

[bleroux]

@mdebbar @kevmoo If you have some bandwidth, thank you to review this PR.

[mdebbar]

The change looks good to me, thanks for the contribution!

But I don't think it solves the linked issue. It only hides the symptom. Can this be done in IOSTextEditingStrategy too?

[bleroux]

@mdebbar Thank you for the review!

But I don't think it solves the linked issue. It only hides the symptom.

Do you have in mind another way to fix this? Because it might help to fix the iOS side.

Can this be done in IOSTextEditingStrategy too?

This solution is not applicable on the iOS side because IOSTextEditingStrategy relies on DOM clickevent to tackle tap/longPress behaviors:

engine/lib/web_ui/lib/src/engine/text_editing/text_editing.dart

Lines 1595 to 1625 in 40136ed

	/// On iOS long press works differently than a single tap.
	///
	/// On a normal tap the virtual keyboard comes up and users can enter text
	/// using the keyboard.
	///
	/// The long press on the other hand focuses on the element without bringing
	/// up the virtual keyboard. It allows the users to modify the field by using
	/// copy/cut/select/paste etc.
	///
	/// After a long press [domElement] is positioned to the correct place. If the
	/// user later single-tap on the [domElement] the virtual keyboard will come
	/// and might shift the page up.
	///
	/// In order to prevent this shift, on a `click` event the position of the
	/// element is again set somewhere outside of the page and
	/// [_positionInputElementTimer] timer is restarted. The element will be
	/// placed to its correct position after [_delayBeforePlacement].
	void _addTapListener() {
	subscriptions.add(DomSubscription(activeDomElement, 'click', (_) {
	// Check if the element is already positioned. If not this does not fall
	// under `The user was using the long press, now they want to enter text
	// via keyboard` journey.
	if (_canPosition) {
	// Re-place the element somewhere outside of the screen.
	initializeElementPlacement();
	// Re-configure the timer to place the element.
	_schedulePlacement();
	}
	}));
	}

[mdebbar]

Do you have in mind another way to fix this? Because it might help to fix the iOS side.

Well, that's a tricky issue that we've had for a while (see flutter/flutter#99918 and flutter/flutter#70841 for example). The only solution for it is to overhaul our text editing system (discussed in flutter/flutter#120613).