From aea4c847e797697d1c8add5217e50a87bd3c6bec Mon Sep 17 00:00:00 2001
From: Niklas Kiefer <niklas.kiefer@camunda.com>
Date: Thu, 7 Sep 2023 11:46:42 +0200
Subject: [PATCH] wip wip

---
 src/components/Popup.js                  |  4 +++-
 src/components/entries/FEEL/FeelPopup.js | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Popup.js b/src/components/Popup.js
index 821faf44..7903a2e8 100644
--- a/src/components/Popup.js
+++ b/src/components/Popup.js
@@ -30,6 +30,7 @@ const noop = () => {};
  * @param {Function} [props.onPostActivate]
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
+ * @param {boolean} [props.closeOnCancel]
  * @param {string} props.title
  */
 export function Popup(props) {
@@ -44,6 +45,7 @@ export function Popup(props) {
     onPostActivate = noop,
     onPostDeactivate = noop,
     returnFocus = true,
+    closeOnCancel = true,
     title
   } = props;
 
@@ -51,7 +53,7 @@ export function Popup(props) {
   const popupRef = useRef(null);
 
   const handleKeyPress = event => {
-    if (event.key === 'Escape') {
+    if (closeOnCancel && event.key === 'Escape') {
       onClose();
     }
   };
diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
index adc12d2f..11d4fca4 100644
--- a/src/components/entries/FEEL/FeelPopup.js
+++ b/src/components/entries/FEEL/FeelPopup.js
@@ -93,6 +93,19 @@ function FeelPopupComponent(props) {
     sourceElement && sourceElement.focus();
   };
 
+  const onKeyDown = (event) => {
+    if (event.key === 'Escape') {
+
+      // close popup only if auto completion is not open
+      // we need to do check this because the editor is not
+      // stop propagating the keydown event
+      // cf. https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322/5
+      if (!autoCompletionOpen(event.target)) {
+        onClose();
+      }
+    }
+  };
+
   useEffect(() => {
     const editor = editorRef.current;
 
@@ -110,6 +123,7 @@ function FeelPopupComponent(props) {
 
       // handle focus manually on deactivate
       returnFocus={ false }
+      closeOnCancel={ false }
       onPostDeactivate={ handleSetReturnFocus }
       height={ FEEL_POPUP_HEIGHT }
       width={ FEEL_POPUP_WIDTH }
@@ -118,7 +132,9 @@ function FeelPopupComponent(props) {
         title={ title }
         draggable />
       <Popup.Body>
-        <div class="bio-properties-panel-feel-popup__body">
+
+        {/* todo(pinussilvestrus): why is this only working in capture phase? */}
+        <div onKeyDownCapture={ onKeyDown } class="bio-properties-panel-feel-popup__body">
 
           {
             type === 'feel' && (
@@ -167,4 +183,8 @@ function FeelPopupComponent(props) {
 
 function prefixId(id) {
   return `bio-properties-panel-${id}`;
+}
+
+function autoCompletionOpen(element) {
+  return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
 }
\ No newline at end of file