refactor: implementation using focusNode

Author: Cyrine-benabid

frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart

@@ -9,22 +9,21 @@ class InputTextField extends StatefulWidget {
   final void Function(String)? onDone;
   final void Function(String)? onChanged;
   final void Function() onCanceled;
-  final void Function()? onFocused;
   final void Function()? onTap;
-
   final bool autoClearWhenDone;
   final String text;
   final int? maxLength;
+  final FocusNode? focusNode;
 
   const InputTextField({
     required this.text,
     this.onDone,
     required this.onCanceled,
     this.onChanged,
-    this.onFocused,
     this.onTap,
     this.autoClearWhenDone = false,
     this.maxLength,
+    this.focusNode,
     Key? key,
   }) : super(key: key);
 
@@ -39,7 +38,7 @@ class _InputTextFieldState extends State<InputTextField> {
 
   @override
   void initState() {
-    _focusNode = FocusNode();
+    _focusNode = widget.focusNode ?? FocusNode();
     _controller = TextEditingController(text: widget.text);
 
     _focusNode.addListener(notifyDidEndEditing);
@@ -87,7 +86,10 @@ class _InputTextFieldState extends State<InputTextField> {
   @override
   void dispose() {
     _focusNode.removeListener(notifyDidEndEditing);
-    _focusNode.dispose();
+    // only dispose the focusNode if it was created in this widget's initState
+    if (widget.focusNode == null) {
+      _focusNode.dispose();
+    }
     super.dispose();
   }
 
@@ -100,10 +102,6 @@ class _InputTextFieldState extends State<InputTextField> {
           widget.onDone!(_controller.text);
         }
       }
-    } else {
-      if (widget.onFocused != null) {
-        widget.onFocused!();
-      }
     }
   }
 }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart

@@ -267,9 +267,29 @@ class _AddOptionButton extends StatelessWidget {
   }
 }
 
-class _CreateOptionTextField extends StatelessWidget {
+class _CreateOptionTextField extends StatefulWidget {
   final PopoverMutex? popoverMutex;
-  const _CreateOptionTextField({this.popoverMutex, Key? key}) : super(key: key);
+  const _CreateOptionTextField({
+    super.key,
+    this.popoverMutex,
+  });
+
+  @override
+  State<_CreateOptionTextField> createState() => __CreateOptionTextFieldState();
+}
+
+class __CreateOptionTextFieldState extends State<_CreateOptionTextField> {
+  late final FocusNode _focusNode;
+
+  @override
+  void initState() {
+    _focusNode = FocusNode();
+    _focusNode.addListener(() {
+      if (_focusNode.hasFocus) {
+        widget.popoverMutex?.close();
+      }
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -280,6 +300,7 @@ class _CreateOptionTextField extends StatelessWidget {
           autoClearWhenDone: true,
           maxLength: 30,
           text: text,
+          focusNode: _focusNode,
           onCanceled: () {
             context
                 .read<SelectOptionTypeOptionBloc>()
@@ -290,11 +311,8 @@ class _CreateOptionTextField extends StatelessWidget {
                 .read<SelectOptionTypeOptionBloc>()
                 .add(SelectOptionTypeOptionEvent.createOption(optionName));
           },
-          onFocused: () {
-            popoverMutex?.close();
-          },
           onTap: () {
-            popoverMutex?.close();
+            widget.popoverMutex?.close();
           },
         );
       },