Implement Double Tap Handling in TextField and Editable (#21264)

Thanks @NikoYuwono for getting this working! We appreciate your help!

* Implement Double Tap Handling in TextField and Editable

* Fix test broken by the change and add test for double tap

* Fix affected tests

* Remove unnecessary new

* Fix test

packages/flutter/lib/src/material/text_field.dart

@@ -496,6 +496,11 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
     _cancelCurrentSplash();
   }
 
+  void _handleDoubleTap() {
+    _renderEditable.handleDoubleTap();
+    _confirmCurrentSplash();
+  }
+
   void _handleLongPress() {
     _renderEditable.handleLongPress();
     _confirmCurrentSplash();
@@ -614,6 +619,7 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
           onTapDown: _handleTapDown,
           onTap: _handleTap,
           onTapCancel: _handleTapCancel,
+          onDoubleTap: _handleDoubleTap,
           onLongPress: _handleLongPress,
           excludeFromSemantics: true,
           child: child,

packages/flutter/lib/src/rendering/editable.dart

@@ -32,6 +32,10 @@ enum SelectionChangedCause {
   /// of the cursor) to change.
   tap,
 
+  /// The user tapped twice in quick succession on the text and that caused
+  /// the selection (or the location of the cursor) to change.
+  doubleTap,
+
   /// The user long-pressed the text and that caused the selection (or the
   /// location of the cursor) to change.
   longPress,
@@ -168,6 +172,8 @@ class RenderEditable extends RenderBox {
     _tap = TapGestureRecognizer(debugOwner: this)
       ..onTapDown = _handleTapDown
       ..onTap = _handleTap;
+    _doubleTap = DoubleTapGestureRecognizer(debugOwner: this)
+      ..onDoubleTap = _handleDoubleTap;
     _longPress = LongPressGestureRecognizer(debugOwner: this)
       ..onLongPress = _handleLongPress;
   }
@@ -185,7 +191,7 @@ class RenderEditable extends RenderBox {
 
   /// If true [handleEvent] does nothing and it's assumed that this
   /// renderer will be notified of input gestures via [handleTapDown],
-  /// [handleTap], and [handleLongPress].
+  /// [handleTap], [handleDoubleTap], and [handleLongPress].
   ///
   /// The default value of this property is false.
   bool ignorePointer;
@@ -1022,6 +1028,7 @@ class RenderEditable extends RenderBox {
   bool hitTestSelf(Offset position) => true;
 
   TapGestureRecognizer _tap;
+  DoubleTapGestureRecognizer _doubleTap;
   LongPressGestureRecognizer _longPress;
 
   @override
@@ -1031,6 +1038,7 @@ class RenderEditable extends RenderBox {
     assert(debugHandleEvent(event, entry));
     if (event is PointerDownEvent && onSelectionChanged != null) {
       _tap.addPointer(event);
+      _doubleTap.addPointer(event);
       _longPress.addPointer(event);
     }
   }
@@ -1070,6 +1078,25 @@ class RenderEditable extends RenderBox {
     handleTap();
   }
 
+  /// If [ignorePointer] is false (the default) then this method is called by
+  /// the internal gesture recognizer's [DoubleTapGestureRecognizer.onDoubleTap]
+  /// callback.
+  ///
+  /// When [ignorePointer] is true, an ancestor widget must respond to long
+  /// press events by calling this method.
+  void handleDoubleTap() {
+    _layoutText(constraints.maxWidth);
+    assert(_lastTapDownPosition != null);
+    if (onSelectionChanged != null) {
+      final TextPosition position = _textPainter.getPositionForOffset(globalToLocal(_lastTapDownPosition));
+      onSelectionChanged(_selectWordAtOffset(position), this, SelectionChangedCause.doubleTap);
+    }
+  }
+  void _handleDoubleTap() {
+    assert(!ignorePointer);
+    handleDoubleTap();
+  }
+
   /// If [ignorePointer] is false (the default) then this method is called by
   /// the internal gesture recognizer's [LongPressRecognizer.onLongPress]
   /// callback.

packages/flutter/test/cupertino/tab_scaffold_test.dart

@@ -179,6 +179,7 @@ void main() {
     );
 
     await tester.tap(find.widgetWithText(TextField, 'TextField 2'));
+    await tester.pump(const Duration(milliseconds: 300));
 
     expect(
       focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),
@@ -189,6 +190,7 @@ void main() {
     await tester.pump();
 
     await tester.tap(find.widgetWithText(TextField, 'TextField 1'));
+    await tester.pump(const Duration(milliseconds: 300));
 
     expect(
       focusNodes.indexOf(focusNodes.singleWhere((FocusNode node) => node.hasFocus)),

packages/flutter/test/material/search_test.dart

@@ -164,7 +164,7 @@ void main() {
       delegate: delegate,
     ));
     await tester.tap(find.byTooltip('Search'));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     // Showing suggestions
     expect(find.text('Suggestions'), findsOneWidget);
@@ -173,14 +173,14 @@ void main() {
     // Typing query Wow
     delegate.querysForSuggestions.clear();
     await tester.enterText(find.byType(TextField), 'Wow');
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     expect(delegate.query, 'Wow');
     expect(delegate.querysForSuggestions, <String>['Wow']);
     expect(delegate.querysForResults, hasLength(0));
 
     await tester.tap(find.text('Suggestions'));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     // Showing Results
     expect(find.text('Suggestions'), findsNothing);
@@ -195,7 +195,7 @@ void main() {
 
     // Taping search field to go back to suggestions
     await tester.tap(find.byType(TextField));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     textField = tester.widget(find.byType(TextField));
     expect(textField.focusNode.hasFocus, isTrue);
@@ -206,7 +206,7 @@ void main() {
     expect(delegate.querysForResults, <String>['Wow']);
 
     await tester.enterText(find.byType(TextField), 'Foo');
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     expect(delegate.query, 'Foo');
     expect(delegate.querysForSuggestions, <String>['Wow', 'Wow', 'Foo']);
@@ -214,7 +214,7 @@ void main() {
 
     // Go to results again
     await tester.tap(find.text('Suggestions'));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(const Duration(milliseconds: 300));
 
     expect(find.text('Suggestions'), findsNothing);
     expect(find.text('Results'), findsOneWidget);

packages/flutter/test/material/text_field_focus_test.dart

@@ -6,6 +6,8 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:flutter/material.dart';
 
 void main() {
+  const Duration doubleTapTimeout = Duration(milliseconds: 300);
+
   testWidgets('Request focus shows keyboard', (WidgetTester tester) async {
     final FocusNode focusNode = FocusNode();
 
@@ -71,7 +73,7 @@ void main() {
     expect(tester.testTextInput.isVisible, isFalse);
 
     await tester.tap(find.byType(TextField));
-    await tester.idle();
+    await tester.pump(doubleTapTimeout);
 
     expect(tester.testTextInput.isVisible, isTrue);
 
@@ -80,7 +82,7 @@ void main() {
     expect(tester.testTextInput.isVisible, isFalse);
 
     await tester.tap(find.byType(TextField));
-    await tester.idle();
+    await tester.pump(doubleTapTimeout);
 
     expect(tester.testTextInput.isVisible, isTrue);
 
@@ -113,17 +115,17 @@ void main() {
       builder: (BuildContext context) => const SimpleDialog(title: Text('Dialog')),
     );
 
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     expect(tester.testTextInput.isVisible, isFalse);
 
     Navigator.of(tester.element(find.text('Dialog'))).pop();
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     expect(tester.testTextInput.isVisible, isFalse);
 
     await tester.tap(find.byType(TextField));
-    await tester.idle();
+    await tester.pump(doubleTapTimeout);
 
     expect(tester.testTextInput.isVisible, isTrue);
 
@@ -224,7 +226,7 @@ void main() {
 
     expect(tester.testTextInput.isVisible, isFalse);
     await tester.tap(find.byType(TextField));
-    await tester.idle();
+    await tester.pump(doubleTapTimeout);
     expect(tester.testTextInput.isVisible, isTrue);
   });
 }

packages/flutter/test/material/text_field_splash_test.dart

@@ -121,32 +121,32 @@ void main() {
     cancelCount = 0;
 
     await tester.tap(find.byKey(textField1));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(Duration(milliseconds: 300));
     expect(confirmCount, 1);
     expect(cancelCount, 0);
 
     // textField1 already has the focus, no new splash
     await tester.tap(find.byKey(textField1));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(Duration(milliseconds: 300));
     expect(confirmCount, 1);
     expect(cancelCount, 0);
 
     // textField2 gets the focus and a splash
     await tester.tap(find.byKey(textField2));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(Duration(milliseconds: 300));
     expect(confirmCount, 2);
     expect(cancelCount, 0);
 
     // Tap outside of textField1's editable. It still gets focus and splash.
     await tester.tapAt(tester.getTopLeft(find.byKey(textField1)));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(Duration(milliseconds: 300));
     expect(confirmCount, 3);
     expect(cancelCount, 0);
 
     // Tap in the center of textField2's editable. It still gets the focus
     // and the splash. There is no splash cancel.
     await tester.tap(find.byKey(textField2));
-    await tester.pumpAndSettle();
+    await tester.pumpAndSettle(Duration(milliseconds: 300));
     expect(confirmCount, 4);
     expect(cancelCount, 0);
   });

packages/flutter/test/widgets/editable_text_test.dart

@@ -20,6 +20,7 @@ void main() {
   final FocusScopeNode focusScopeNode = FocusScopeNode();
   const TextStyle textStyle = TextStyle();
   const Color cursorColor = Color.fromARGB(0xFF, 0xFF, 0x00, 0x00);
+  const Duration doubleTapTimeout = Duration(milliseconds: 300);
 
   setUp(() {
     debugResetSemanticsIdCounter();
@@ -53,6 +54,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -119,6 +121,7 @@ void main() {
       ),
     );
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -282,6 +285,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -311,6 +315,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -341,6 +346,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -373,6 +379,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -403,6 +410,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -433,6 +441,7 @@ void main() {
     );
 
     await tester.tap(find.byType(EditableText));
+    await tester.pump(doubleTapTimeout);
     await tester.showKeyboard(find.byType(EditableText));
     controller.text = 'test';
     await tester.idle();
@@ -608,7 +617,7 @@ void main() {
     // Select EditableText to give it focus.
     final Finder textFinder = find.byKey(editableTextKey);
     await tester.tap(textFinder);
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     assert(focusNode.hasFocus);
 
@@ -645,7 +654,7 @@ void main() {
     // Select EditableText to give it focus.
     final Finder textFinder = find.byKey(editableTextKey);
     await tester.tap(textFinder);
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     assert(focusNode.hasFocus);
 
@@ -689,7 +698,7 @@ void main() {
     // Select EditableText to give it focus.
     final Finder textFinder = find.byKey(editableTextKey);
     await tester.tap(textFinder);
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     assert(focusNode.hasFocus);
 
@@ -733,7 +742,7 @@ void main() {
     // Select EditableText to give it focus.
     final Finder textFinder = find.byKey(editableTextKey);
     await tester.tap(textFinder);
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     assert(focusNode.hasFocus);
 
@@ -838,7 +847,7 @@ void main() {
 
     await tester.tap(find.byType(EditableText));
     await tester.idle();
-    await tester.pump();
+    await tester.pump(doubleTapTimeout);
 
     expect(
         semantics,
@@ -1479,7 +1488,7 @@ void main() {
 
       await _buildApp(controls, tester);
       await tester.tap(find.byType(EditableText));
-      await tester.pump();
+      await tester.pump(doubleTapTimeout);
 
       expect(
           semantics,
@@ -1565,7 +1574,7 @@ void main() {
       when(controls.canPaste(any)).thenReturn(true);
       await _buildApp(controls, tester);
       await tester.tap(find.byType(EditableText));
-      await tester.pump();
+      await tester.pump(doubleTapTimeout);
 
       final SemanticsOwner owner = tester.binding.pipelineOwner.semanticsOwner;
       const int expectedNodeId = 4;