From f0d47ee50ca471cd3616d620b411a3f2eb6f4a29 Mon Sep 17 00:00:00 2001
From: Mathias Mogensen <42929161+Xazin@users.noreply.github.com>
Date: Wed, 11 Oct 2023 05:49:32 +0200
Subject: [PATCH] fix: esc to close date picker dialog (#3648)

---
 .../widgets/date_picker_dialog.dart           | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/date_picker_dialog.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/date_picker_dialog.dart
index 8fc83567ab..df8b1a3951 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/date_picker_dialog.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/date_picker_dialog.dart
@@ -3,6 +3,7 @@ import 'package:appflowy_backend/protobuf/flowy-user/date_time.pbenum.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/decoration.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 /// Provides arguemnts for [AppFlowyCalender] when showing
 /// a [DatePickerMenu]
@@ -76,17 +77,19 @@ class DatePickerMenu extends DatePickerService {
   }) {
     dismiss();
 
-    final editorSize = editorState.renderBox!.size;
+    // Use MediaQuery, since Stack takes up all window space
+    // and not just the space of the current Editor
+    final windowSize = MediaQuery.of(context).size;
 
     double offsetX = offset.dx;
     double offsetY = offset.dy;
 
-    final showRight = (offset.dx + _datePickerWidth) < editorSize.width;
+    final showRight = (offset.dx + _datePickerWidth) < windowSize.width;
     if (!showRight) {
       offsetX = offset.dx - _datePickerWidth;
     }
 
-    final showBelow = (offset.dy + _datePickerHeight) < editorSize.height;
+    final showBelow = (offset.dy + _datePickerHeight) < windowSize.height;
     if (!showBelow) {
       offsetY = offset.dy - _datePickerHeight;
     }
@@ -96,19 +99,28 @@ class DatePickerMenu extends DatePickerService {
         return Material(
           type: MaterialType.transparency,
           child: SizedBox(
-            height: editorSize.height,
-            width: editorSize.width,
-            child: GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTap: dismiss,
-              child: Stack(
-                children: [
-                  _AnimatedDatePicker(
-                    offset: Offset(offsetX, offsetY),
-                    showBelow: showBelow,
-                    options: options,
-                  ),
-                ],
+            height: windowSize.height,
+            width: windowSize.width,
+            child: RawKeyboardListener(
+              focusNode: FocusNode()..requestFocus(),
+              onKey: (event) {
+                if (event is RawKeyDownEvent &&
+                    event.logicalKey == LogicalKeyboardKey.escape) {
+                  dismiss();
+                }
+              },
+              child: GestureDetector(
+                behavior: HitTestBehavior.opaque,
+                onTap: dismiss,
+                child: Stack(
+                  children: [
+                    _AnimatedDatePicker(
+                      offset: Offset(offsetX, offsetY),
+                      showBelow: showBelow,
+                      options: options,
+                    ),
+                  ],
+                ),
               ),
             ),
           ),