mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
d56b8bee57
## Description
This PR fixes cursor jump on Chrome for Android when the user taps in a multiline `TextField`.
Using the following code sample:
<details><summary>Code sample</summary>
```dart
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.
);
}
}
```
</details>
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.
https://user-images.githubusercontent.com/840911/232051413-b913f890-6cb1-4c60-92d0-7a3bf74cc688.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 https://github.com/flutter/flutter/issues/124483 (partial fix because the issue is also reproducible on iOS/Safari).
## Tests
Adds 1 test.