fix: regression on hover effect persisting after closing menu (#1253)

* fix: regression on hover effect persisting after closing menu

* chore: reset onhover when FlowyHover get rebuild

Co-authored-by: appflowy <[email protected]>

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart

@@ -51,7 +51,9 @@ class ViewSectionItem extends StatelessWidget {
               onTap: () => onSelected(blocContext.read<ViewBloc>().state.view),
               child: FlowyHover(
                 style: HoverStyle(hoverColor: theme.bg3),
-                buildWhen: () => !state.isEditing,
+                // If current state.isEditing is true, the hover should not
+                // rebuild when onEnter/onExit events happened.
+                buildWhenOnHover: () => !state.isEditing,
                 builder: (_, onHover) => _render(
                   blocContext,
                   onHover,

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart

@@ -8,10 +8,18 @@ class FlowyHover extends StatefulWidget {
   final HoverStyle style;
   final HoverBuilder? builder;
   final Widget? child;
+
   final bool Function()? isSelected;
   final void Function(bool)? onHover;
   final MouseCursor? cursor;
-  final bool Function()? buildWhen;
+
+  /// Determined whether the [builder] should get called when onEnter/onExit
+  /// happened
+  ///
+  /// [FlowyHover] show hover when [MouseRegion]'s onEnter get called
+  /// [FlowyHover] hide hover when [MouseRegion]'s onExit get called
+  ///
+  final bool Function()? buildWhenOnHover;
 
   const FlowyHover({
     Key? key,
@@ -21,7 +29,7 @@ class FlowyHover extends StatefulWidget {
     this.isSelected,
     this.onHover,
     this.cursor,
-    this.buildWhen,
+    this.buildWhenOnHover,
   }) : super(key: key);
 
   @override
@@ -31,6 +39,13 @@ class FlowyHover extends StatefulWidget {
 class _FlowyHoverState extends State<FlowyHover> {
   bool _onHover = false;
 
+  @override
+  void didUpdateWidget(covariant FlowyHover oldWidget) {
+    // Reset the _onHover to false when the parent widget get rebuild.
+    _onHover = false;
+    super.didUpdateWidget(oldWidget);
+  }
+
   @override
   Widget build(BuildContext context) {
     return MouseRegion(
@@ -39,7 +54,7 @@ class _FlowyHoverState extends State<FlowyHover> {
       onEnter: (p) {
         if (_onHover) return;
 
-        if (widget.buildWhen?.call() ?? true) {
+        if (widget.buildWhenOnHover?.call() ?? true) {
           setState(() => _onHover = true);
           if (widget.onHover != null) {
             widget.onHover!(true);
@@ -49,7 +64,7 @@ class _FlowyHoverState extends State<FlowyHover> {
       onExit: (p) {
         if (_onHover == false) return;
 
-        if (widget.buildWhen?.call() ?? true) {
+        if (widget.buildWhenOnHover?.call() ?? true) {
           setState(() => _onHover = false);
           if (widget.onHover != null) {
             widget.onHover!(false);

frontend/app_flowy/pubspec.lock

@@ -28,14 +28,14 @@ packages:
       path: "packages/appflowy_board"
       relative: true
     source: path
-    version: "0.0.8"
+    version: "0.0.9"
   appflowy_editor:
     dependency: "direct main"
     description:
       path: "packages/appflowy_editor"
       relative: true
     source: path
-    version: "0.0.5"
+    version: "0.0.6"
   appflowy_popover:
     dependency: "direct main"
     description: