Re-arranged handling of focus scope so that it works with toolbar in an Overlay

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

@@ -300,11 +300,31 @@ class LinkButton extends StatefulWidget {
 }
 
 class _LinkButtonState extends State<LinkButton> {
-  final TextEditingController _inputController = new TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  final TextEditingController _inputController = TextEditingController();
   Key _inputKey;
   bool _formatError = false;
+  ZefyrEditorScope _editor;
+
   bool get isEditing => _inputKey != null;
 
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final toolbar = ZefyrToolbar.of(context);
+    if (_editor != toolbar.editor) {
+      _editor?.setToolbarFocusNode(null);
+      _editor = toolbar.editor;
+      _editor.setToolbarFocusNode(_focusNode);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final toolbar = ZefyrToolbar.of(context);
@@ -376,7 +396,7 @@ class _LinkButtonState extends State<LinkButton> {
         _inputController.text = '';
         _inputController.removeListener(_handleInputChange);
         toolbar.markNeedsRebuild();
-        toolbar.editor.focus(context);
+        toolbar.editor.focus();
       }
     });
   }
@@ -388,7 +408,7 @@ class _LinkButtonState extends State<LinkButton> {
         _inputKey = null;
         _inputController.text = '';
         _inputController.removeListener(_handleInputChange);
-        editor.focus(context);
+        editor.focus();
       });
     }
   }
@@ -424,7 +444,6 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   Widget buildOverlay(BuildContext context) {
-
     final toolbar = ZefyrToolbar.of(context);
     final style = toolbar.editor.selectionStyle;
 
@@ -438,7 +457,7 @@ class _LinkButtonState extends State<LinkButton> {
         : _LinkInput(
             key: _inputKey,
             controller: _inputController,
-            focusNode: toolbar.editor.toolbarFocusNode,
+            focusNode: _focusNode,
             formatError: _formatError,
           );
     final items = <Widget>[Expanded(child: body)];
@@ -517,13 +536,14 @@ class _LinkInputState extends State<_LinkInput> {
       keyboardType: TextInputType.url,
       focusNode: widget.focusNode,
       controller: widget.controller,
-      autofocus: true,
+//      autofocus: true,
       decoration: new InputDecoration(
-          hintText: 'https://',
-          filled: true,
-          fillColor: toolbarTheme.color,
-          border: InputBorder.none,
-          contentPadding: const EdgeInsets.all(10.0)),
+        hintText: 'https://',
+        filled: true,
+        fillColor: toolbarTheme.color,
+        border: InputBorder.none,
+        contentPadding: const EdgeInsets.all(10.0),
+      ),
     );
   }
 }

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

@@ -15,15 +15,14 @@ class ZefyrEditorScope extends ChangeNotifier {
     @required ZefyrImageDelegate imageDelegate,
     @required ZefyrController controller,
     @required FocusNode focusNode,
-    @required FocusNode toolbarFocusNode,
+    @required FocusScopeNode focusScope,
   })  : _controller = controller,
         _imageDelegate = imageDelegate,
-        _focusNode = focusNode,
-        _toolbarFocusNode = toolbarFocusNode {
+        _focusScope = focusScope,
+        _focusNode = focusNode {
     _selectionStyle = _controller.getSelectionStyle();
     _selection = _controller.selection;
     _controller.addListener(_handleControllerChange);
-    toolbarFocusNode.addListener(_handleFocusChange);
     _focusNode.addListener(_handleFocusChange);
   }
 
@@ -32,9 +31,9 @@ class ZefyrEditorScope extends ChangeNotifier {
   ZefyrImageDelegate _imageDelegate;
   ZefyrImageDelegate get imageDelegate => _imageDelegate;
 
+  FocusScopeNode get focusScope => _focusScope;
+  FocusScopeNode _focusScope;
   FocusNode _focusNode;
-  FocusNode _toolbarFocusNode;
-  FocusNode get toolbarFocusNode => _toolbarFocusNode;
 
   ZefyrController _controller;
   NotusStyle get selectionStyle => _selectionStyle;
@@ -46,7 +45,6 @@ class ZefyrEditorScope extends ChangeNotifier {
   void dispose() {
     assert(!_disposed);
     _controller.removeListener(_handleControllerChange);
-    _toolbarFocusNode.removeListener(_handleFocusChange);
     _focusNode.removeListener(_handleFocusChange);
     _disposed = true;
     super.dispose();
@@ -102,11 +100,23 @@ class ZefyrEditorScope extends ChangeNotifier {
     notifyListeners();
   }
 
+  FocusNode _toolbarFocusNode;
+
+  void setToolbarFocusNode(FocusNode node) {
+    assert(!_disposed);
+    if (_toolbarFocusNode != node) {
+      _toolbarFocusNode?.removeListener(_handleFocusChange);
+      _toolbarFocusNode = node;
+      _toolbarFocusNode.addListener(_handleFocusChange);
+      notifyListeners();
+    }
+  }
+
   FocusOwner get focusOwner {
     assert(!_disposed);
     if (_focusNode.hasFocus) {
       return FocusOwner.editor;
-    } else if (toolbarFocusNode.hasFocus) {
+    } else if (_toolbarFocusNode?.hasFocus == true) {
       return FocusOwner.toolbar;
     } else {
       return FocusOwner.none;
@@ -124,9 +134,9 @@ class ZefyrEditorScope extends ChangeNotifier {
     _controller.formatSelection(value);
   }
 
-  void focus(BuildContext context) {
+  void focus() {
     assert(!_disposed);
-    FocusScope.of(context).requestFocus(_focusNode);
+    _focusScope.requestFocus(_focusNode);
   }
 
   void hideKeyboard() {
@@ -181,7 +191,6 @@ class ZefyrEditor extends StatefulWidget {
 }
 
 class _ZefyrEditorState extends State<ZefyrEditor> {
-  final FocusNode _toolbarFocusNode = new FocusNode();
   ZefyrImageDelegate _imageDelegate;
   ZefyrEditorScope _scope;
   ZefyrThemeData _themeData;
@@ -194,7 +203,6 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       builder: (context) => _ZefyrToolbarContainer(
             theme: _themeData,
             toolbar: ZefyrToolbar(
-              focusNode: _toolbarFocusNode,
               editor: _scope,
               delegate: widget.toolbarDelegate,
             ),
@@ -213,6 +221,10 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       hideToolbar();
     } else if (_toolbar == null) {
       showToolbar();
+    } else {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _toolbar?.markNeedsBuild();
+      });
     }
   }
 
@@ -220,13 +232,6 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   void initState() {
     super.initState();
     _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
-    _scope = ZefyrEditorScope(
-      toolbarFocusNode: _toolbarFocusNode,
-      imageDelegate: _imageDelegate,
-      controller: widget.controller,
-      focusNode: widget.focusNode,
-    );
-    _scope.addListener(_handleChange);
   }
 
   @override
@@ -244,6 +249,21 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   void didChangeDependencies() {
     super.didChangeDependencies();
 
+    if (_scope == null) {
+      _scope = ZefyrEditorScope(
+        imageDelegate: _imageDelegate,
+        controller: widget.controller,
+        focusNode: widget.focusNode,
+        focusScope: FocusScope.of(context),
+      );
+      _scope.addListener(_handleChange);
+    } else {
+      final focusScope = FocusScope.of(context);
+      if (focusScope != _scope._focusScope) {
+        _scope._focusScope = focusScope;
+      }
+    }
+
     final parentTheme = ZefyrTheme.of(context, nullOk: true);
     final fallbackTheme = ZefyrThemeData.fallback(context);
     _themeData = (parentTheme != null)
@@ -263,7 +283,6 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     hideToolbar();
     _scope.removeListener(_handleChange);
     _scope.dispose();
-    _toolbarFocusNode.dispose();
     super.dispose();
   }
 

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

@@ -102,13 +102,11 @@ class ZefyrToolbar extends StatefulWidget implements PreferredSizeWidget {
 
   const ZefyrToolbar({
     Key key,
-    @required this.focusNode,
     @required this.editor,
     this.autoHide: true,
     this.delegate,
   }) : super(key: key);
 
-  final FocusNode focusNode;
   final ZefyrToolbarDelegate delegate;
   final ZefyrEditorScope editor;
 
@@ -187,21 +185,12 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
   ZefyrEditorScope get editor => widget.editor;
 
-  void _handleChange() {
-    if (_selection != editor.selection) {
-      _selection = editor.selection;
-      closeOverlay();
-    }
-    setState(() {});
-  }
-
   @override
   void initState() {
     super.initState();
     _delegate = widget.delegate ?? new _DefaultZefyrToolbarDelegate();
     _overlayAnimation = new AnimationController(
         vsync: this, duration: Duration(milliseconds: 100));
-    widget.editor.addListener(_handleChange);
   }
 
   @override
@@ -210,15 +199,14 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
     if (widget.delegate != oldWidget.delegate) {
       _delegate = widget.delegate ?? new _DefaultZefyrToolbarDelegate();
     }
-    if (widget.editor != oldWidget.editor) {
-      oldWidget.editor.removeListener(_handleChange);
-      widget.editor.addListener(_handleChange);
+    if (_selection != editor.selection) {
+      _selection = editor.selection;
+      closeOverlay();
     }
   }
 
   @override
   void dispose() {
-    widget.editor.removeListener(_handleChange);
     super.dispose();
   }
 
@@ -253,11 +241,14 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
     final constraints =
         BoxConstraints.tightFor(height: ZefyrToolbar.kToolbarHeight);
-    return new _ZefyrToolbarScope(
-      toolbar: this,
-      child: Container(
-        constraints: constraints,
-        child: Stack(children: layers),
+    return FocusScope(
+      node: editor.focusScope,
+      child: _ZefyrToolbarScope(
+        toolbar: this,
+        child: Container(
+          constraints: constraints,
+          child: Stack(children: layers),
+        ),
       ),
     );
   }

packages/zefyr/test/widgets/buttons_test.dart

@@ -104,6 +104,7 @@ void main() {
       await tester
           .tap(find.widgetWithText(GestureDetector, 'Tap to edit link'));
       await tester.pumpAndSettle();
+      expect(editor.focusNode.hasFocus, isFalse);
       await editor.updateSelection(base: 10, extent: 10);
       expect(find.byIcon(Icons.link_off), findsNothing);
     });

packages/zefyr/test/widgets/selection_test.dart

@@ -65,7 +65,7 @@ void main() {
       RenderBox renderObject =
           tester.firstRenderObject(find.byType(ZefyrEditableText));
       var offset = renderObject.localToGlobal(Offset.zero);
-      offset += Offset(50.0, renderObject.size.height - 5.0);
+      offset += Offset(50.0, renderObject.size.height - 500.0);
       await tester.tapAt(offset);
       await tester.pumpAndSettle();
       expect(editor.controller.selection.isCollapsed, isTrue);