diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart
index d95f3ecbcf..30ff0addd9 100644
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/magic_link_sign_in_buttons.dart
@@ -21,10 +21,12 @@ class SignInWithMagicLinkButtons extends StatefulWidget {
 class _SignInWithMagicLinkButtonsState
     extends State<SignInWithMagicLinkButtons> {
   final controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
 
   @override
   void dispose() {
     controller.dispose();
+    _focusNode.dispose();
     super.dispose();
   }
 
@@ -37,6 +39,7 @@ class _SignInWithMagicLinkButtonsState
           height: PlatformExtension.isMobile ? 38.0 : 48.0,
           child: FlowyTextField(
             autoFocus: false,
+            focusNode: _focusNode,
             controller: controller,
             borderRadius: BorderRadius.circular(4.0),
             hintText: LocaleKeys.signIn_pleaseInputYourEmail.tr(),
@@ -49,6 +52,7 @@ class _SignInWithMagicLinkButtonsState
                 ),
             keyboardType: TextInputType.emailAddress,
             onSubmitted: (_) => _sendMagicLink(context, controller.text),
+            onTapOutside: (_) => _focusNode.unfocus(),
           ),
         ),
         const VSpace(12),
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart
index d0780b1c89..aa408f73e1 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart
@@ -39,6 +39,7 @@ class FlowyTextField extends StatefulWidget {
   final bool readOnly;
   final Color? enableBorderColor;
   final BorderRadius? borderRadius;
+  final Function(PointerDownEvent)? onTapOutside;
 
   const FlowyTextField({
     super.key,
@@ -76,6 +77,7 @@ class FlowyTextField extends StatefulWidget {
     this.readOnly = false,
     this.enableBorderColor,
     this.borderRadius,
+    this.onTapOutside,
   });
 
   @override
@@ -161,6 +163,7 @@ class FlowyTextFieldState extends State<FlowyTextField> {
       },
       onSubmitted: _onSubmitted,
       onEditingComplete: widget.onEditingComplete,
+      onTapOutside: widget.onTapOutside,
       minLines: 1,
       maxLines: widget.maxLines,
       maxLength: widget.maxLength,