Merge pull request #75 from memspace/autofocus-fix

Fix for autofocus not working

packages/zefyr/CHANGELOG.md

@@ -1,3 +1,7 @@
+## Unreleased
+
+- Fixed autofocus not being triggered when set to `true` for the first time.
+
 ## 0.3.0
 
 This version introduces new widget `ZefyrScaffold` which allows embedding Zefyr in custom

packages/zefyr/example/lib/src/form.dart

@@ -56,7 +56,7 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
         decoration: InputDecoration(labelText: 'Description'),
         controller: _controller,
         focusNode: _focusNode,
-        autofocus: false,
+        autofocus: true,
         imageDelegate: new CustomImageDelegate(),
         physics: ClampingScrollPhysics(),
       ),

packages/zefyr/example/lib/src/full_page.dart

@@ -31,7 +31,7 @@ final doc =
     r'g":2}},{"insert":"Of course:\nimport ‘package:flutter/material.dart’;"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"import ‘package:zefyr/zefyr.dart’;"},{"insert":"\n\n","attributes":{"block":"code"}},{"insert":"void main() {"},{"insert":"\n","attributes":{"block":"code"}},{"insert":" runApp(MyZefyrApp());"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"}"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"\n\n\n"}]';
 
 Delta getDelta() {
-  return Delta.fromJson(json.decode(doc));
+  return Delta.fromJson(json.decode(doc) as List);
 }
 
 class _FullPageEditorScreenState extends State<FullPageEditorScreen> {

packages/zefyr/lib/src/widgets/editable_text.dart

@@ -119,6 +119,17 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
       FocusScope.of(context).requestFocus(focusNode);
   }
 
+  void focusOrUnfocusIfNeeded() {
+    if (!_didAutoFocus && widget.autofocus && widget.enabled) {
+      FocusScope.of(context).autofocus(focusNode);
+      _didAutoFocus = true;
+    }
+    if (!widget.enabled && focusNode.hasFocus) {
+      _didAutoFocus = false;
+      focusNode.unfocus();
+    }
+  }
+
   //
   // Overridden members of State
   //
@@ -169,14 +180,13 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
   void didUpdateWidget(ZefyrEditableText oldWidget) {
     super.didUpdateWidget(oldWidget);
     _updateSubscriptions(oldWidget);
-    if (!_didAutoFocus && widget.autofocus && widget.enabled) {
-      FocusScope.of(context).autofocus(focusNode);
-      _didAutoFocus = true;
-    }
-    if (!widget.enabled && focusNode.hasFocus) {
-      _didAutoFocus = false;
-      focusNode.unfocus();
-    }
+    focusOrUnfocusIfNeeded();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    focusOrUnfocusIfNeeded();
   }
 
   @override

packages/zefyr/test/testing.dart

@@ -21,12 +21,18 @@ class EditorSandBox {
     FocusNode focusNode,
     NotusDocument document,
     ZefyrThemeData theme,
+    bool autofocus: false,
   }) {
     focusNode ??= FocusNode();
     document ??= NotusDocument.fromDelta(delta);
     var controller = ZefyrController(document);
 
-    Widget widget = _ZefyrSandbox(controller: controller, focusNode: focusNode);
+    Widget widget = _ZefyrSandbox(
+      controller: controller,
+      focusNode: focusNode,
+      autofocus: autofocus,
+    );
+
     if (theme != null) {
       widget = ZefyrTheme(data: theme, child: widget);
     }
@@ -60,13 +66,21 @@ class EditorSandBox {
     return tester.pumpAndSettle();
   }
 
-  Future<void> tapEditor() async {
+  Future<void> pump() async {
     await tester.pumpWidget(widget);
+  }
+
+  Future<void> tap() async {
     await tester.tap(find.byType(ZefyrParagraph).first);
     await tester.pumpAndSettle();
     expect(focusNode.hasFocus, isTrue);
   }
 
+  Future<void> pumpAndTap() async {
+    await pump();
+    await tap();
+  }
+
   Future<void> tapHideKeyboardButton() async {
     await tapButtonWithIcon(Icons.keyboard_hide);
   }
@@ -101,10 +115,12 @@ class EditorSandBox {
 }
 
 class _ZefyrSandbox extends StatefulWidget {
-  const _ZefyrSandbox({Key key, this.controller, this.focusNode})
+  const _ZefyrSandbox(
+      {Key key, this.controller, this.focusNode, this.autofocus})
       : super(key: key);
   final ZefyrController controller;
   final FocusNode focusNode;
+  final bool autofocus;
 
   @override
   _ZefyrSandboxState createState() => _ZefyrSandboxState();
@@ -119,6 +135,7 @@ class _ZefyrSandboxState extends State<_ZefyrSandbox> {
       controller: widget.controller,
       focusNode: widget.focusNode,
       enabled: _enabled,
+      autofocus: widget.autofocus,
     );
   }
 

packages/zefyr/test/widgets/buttons_test.dart

@@ -13,7 +13,7 @@ void main() {
   group('$ZefyrButton', () {
     testWidgets('toggle style', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 5, extent: 10);
       await editor.tapButtonWithIcon(Icons.format_bold);
 
@@ -31,7 +31,7 @@ void main() {
     testWidgets('toggle state for different styles of the same attribute',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
 
       await editor.tapButtonWithIcon(Icons.format_list_bulleted);
       expect(editor.document.root.children.first, isInstanceOf<BlockNode>());
@@ -46,7 +46,7 @@ void main() {
   group('$HeadingButton', () {
     testWidgets('toggle menu', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.format_size);
 
       expect(find.text('H1'), findsOneWidget);
@@ -60,7 +60,7 @@ void main() {
 
     testWidgets('toggle styles', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.format_size);
       await editor.tapButtonWithText('H3');
       LineNode line = editor.document.root.children.first;
@@ -71,7 +71,7 @@ void main() {
 
     testWidgets('close overlay', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.format_size);
       expect(find.text('H1'), findsOneWidget);
       await editor.tapButtonWithIcon(Icons.close);
@@ -82,7 +82,7 @@ void main() {
   group('$LinkButton', () {
     testWidgets('disabled when selection is collapsed', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.link);
       expect(find.byIcon(Icons.link_off), findsNothing);
     });
@@ -90,7 +90,7 @@ void main() {
     testWidgets('enabled and toggles menu with non-empty selection',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 5, extent: 10);
       await editor.tapButtonWithIcon(Icons.link);
       expect(find.byIcon(Icons.link_off), findsOneWidget);
@@ -98,7 +98,7 @@ void main() {
 
     testWidgets('auto cancels edit on selection update', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 5, extent: 10);
       await editor.tapButtonWithIcon(Icons.link);
       await tester
@@ -111,7 +111,7 @@ void main() {
 
     testWidgets('editing link', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 5, extent: 10);
 
       await editor.tapButtonWithIcon(Icons.link);
@@ -160,7 +160,7 @@ void main() {
 
     testWidgets('toggle overlay', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
 
       expect(find.byIcon(Icons.photo_camera), findsOneWidget);
@@ -170,7 +170,7 @@ void main() {
 
     testWidgets('pick from camera', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_camera);
       expect(log, hasLength(1));
@@ -189,7 +189,7 @@ void main() {
 
     testWidgets('pick from gallery', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_library);
       expect(log, hasLength(1));

packages/zefyr/test/widgets/code_test.dart

@@ -11,7 +11,7 @@ void main() {
   group('$ZefyrCode', () {
     testWidgets('format as code', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.code);
 
       BlockNode block = editor.document.root.children.first;

packages/zefyr/test/widgets/editable_text_test.dart

@@ -11,11 +11,23 @@ void main() {
   group('$ZefyrEditableText', () {
     testWidgets('user input', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       final currentValue = editor.document.toPlainText();
       await enterText(tester, 'Added $currentValue');
       expect(editor.document.toPlainText(), 'Added This House Is A Circus\n');
     });
+
+    testWidgets('autofocus', (tester) async {
+      final editor = new EditorSandBox(tester: tester, autofocus: true);
+      await editor.pump();
+      expect(editor.focusNode.hasFocus, isTrue);
+    });
+
+    testWidgets('no autofocus', (tester) async {
+      final editor = new EditorSandBox(tester: tester);
+      await editor.pump();
+      expect(editor.focusNode.hasFocus, isFalse);
+    });
   });
 }
 

packages/zefyr/test/widgets/editor_test.dart

@@ -22,7 +22,7 @@ void main() {
       var theme = ZefyrThemeData(linkStyle: TextStyle(color: Colors.red));
       var editor =
           new EditorSandBox(tester: tester, document: doc, theme: theme);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       // TODO: figure out why this extra pump is needed here
       await tester.pumpAndSettle();
       EditableRichText p = tester.widget(find.byType(EditableRichText).first);
@@ -31,7 +31,7 @@ void main() {
 
     testWidgets('collapses selection when unfocused', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 0, extent: 3);
       expect(editor.findSelectionHandle(), findsNWidgets(2));
       await editor.tapHideKeyboardButton();
@@ -41,7 +41,7 @@ void main() {
 
     testWidgets('toggle enabled state', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 0, extent: 3);
       await editor.disable();
       ZefyrEditor widget = tester.widget(find.byType(ZefyrEditor));

packages/zefyr/test/widgets/horizontal_rule_test.dart

@@ -11,7 +11,7 @@ void main() {
   group('$ZefyrHorizontalRule', () {
     testWidgets('format as horizontal rule', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.remove);
 
       LineNode line = editor.document.root.children.last;
@@ -21,7 +21,7 @@ void main() {
     testWidgets('tap left side of horizontal rule puts caret before it',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.remove);
       await editor.updateSelection(base: 0, extent: 0);
 
@@ -35,7 +35,7 @@ void main() {
     testWidgets('tap right side of horizontal rule puts caret after it',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.remove);
       await editor.updateSelection(base: 0, extent: 0);
 
@@ -51,7 +51,7 @@ void main() {
     testWidgets('selects on long press',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.remove);
       await editor.updateSelection(base: 0, extent: 0);
 

packages/zefyr/test/widgets/image_test.dart

@@ -47,7 +47,7 @@ void main() {
 
     testWidgets('embed image', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_camera);
       LineNode line = editor.document.root.children.last;
@@ -63,7 +63,7 @@ void main() {
     testWidgets('tap on left side of image puts caret before it',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_camera);
       await editor.updateSelection(base: 0, extent: 0);
@@ -78,7 +78,7 @@ void main() {
     testWidgets('tap right side of image puts caret after it',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_camera);
       await editor.updateSelection(base: 0, extent: 0);
@@ -94,7 +94,7 @@ void main() {
 
     testWidgets('selects on long press', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
       await editor.tapButtonWithIcon(Icons.photo_camera);
       await editor.updateSelection(base: 0, extent: 0);

packages/zefyr/test/widgets/list_test.dart

@@ -11,7 +11,7 @@ void main() {
   group('$ZefyrList', () {
     testWidgets('format as list', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.format_list_bulleted);
       BlockNode block = editor.document.root.children.first;
       expect(block.style.get(NotusAttribute.block),

packages/zefyr/test/widgets/quote_test.dart

@@ -11,7 +11,7 @@ void main() {
   group('$ZefyrQuote', () {
     testWidgets('format as quote', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.format_quote);
 
       BlockNode block = editor.document.root.children.first;

packages/zefyr/test/widgets/selection_test.dart

@@ -12,7 +12,7 @@ void main() {
   group('$ZefyrSelectionOverlay', () {
     testWidgets('double tap caret shows toolbar', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
 
       RenderEditableParagraph renderObject =
           tester.firstRenderObject(find.byType(EditableRichText));
@@ -27,7 +27,7 @@ void main() {
 
     testWidgets('hides when editor lost focus', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       await editor.updateSelection(base: 0, extent: 5);
       expect(editor.findSelectionHandle(), findsNWidgets(2));
       await editor.unfocus();
@@ -36,7 +36,7 @@ void main() {
 
     testWidgets('tap on padding area finds closest paragraph', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       editor.controller
           .updateSelection(new TextSelection.collapsed(offset: 10));
       await tester.pumpAndSettle();
@@ -54,7 +54,7 @@ void main() {
 
     testWidgets('tap on empty space finds closest paragraph', (tester) async {
       final editor = new EditorSandBox(tester: tester);
-      await editor.tapEditor();
+      await editor.pumpAndTap();
       editor.controller.replaceText(10, 1, '\n',
           selection: new TextSelection.collapsed(offset: 0));
       await tester.pumpAndSettle();