wip wip

bpmn-io · Sep 7, 2023 · aea4c84 · aea4c84
1 parent f27d9a2
commit aea4c84
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git 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,14 +45,15 @@ export function Popup(props) {
     onPostActivate = noop,
     onPostDeactivate = noop,
     returnFocus = true,
+    closeOnCancel = true,
     title
   } = props;
 
   const focusTrapRef = useRef(null);
   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
@@ -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');
 }