fix: do not lose focus and fire a focus/blur event when opening a mod…

…al inside the editor
josdejong · Sep 22, 2021 · cbb0c79 · cbb0c79
1 parent 7ffd586
commit cbb0c79
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/lib/components/modes/codemode/CodeMode.svelte b/src/lib/components/modes/codemode/CodeMode.svelte
@@ -133,11 +133,15 @@
     }
   }
 
+  // modalOpen is true when one of the modals is open.
+  // This is used to track whether the editor still has focus
+  let modalOpen = false
+
   createFocusTracker({
     onMount,
     onDestroy,
     getWindow: () => getWindow(domCodeMode),
-    hasFocus: () => activeElementIsChildOf(domCodeMode),
+    hasFocus: () => (modalOpen && document.hasFocus()) || activeElementIsChildOf(domCodeMode),
     onFocus,
     onBlur
   })
@@ -226,6 +230,8 @@
     try {
       const json = JSON.parse(text)
 
+      modalOpen = true
+
       open(
         SortModal,
         {
@@ -239,7 +245,10 @@
         },
         SORT_MODAL_OPTIONS,
         {
-          onClose: focus
+          onClose: () => {
+            modalOpen = false
+            focus()
+          }
         }
       )
     } catch (err) {
@@ -251,6 +260,8 @@
     try {
       const json = JSON.parse(text)
 
+      modalOpen = true
+
       open(
         TransformModal,
         {
@@ -275,6 +286,7 @@
         TRANSFORM_MODAL_OPTIONS,
         {
           onClose: () => {
+            modalOpen = false
             focus()
             if (onClose) {
               onClose()

diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -121,11 +121,15 @@
   export let onFocus
   export let onBlur
 
+  // modalOpen is true when one of the modals is open.
+  // This is used to track whether the editor still has focus
+  let modalOpen = false
+
   createFocusTracker({
     onMount,
     onDestroy,
     getWindow: () => getWindow(refJsonEditor),
-    hasFocus: () => activeElementIsChildOf(refJsonEditor),
+    hasFocus: () => (modalOpen && document.hasFocus()) || activeElementIsChildOf(refJsonEditor),
     onFocus: () => {
       hasFocus = true
       if (onFocus) {
@@ -973,6 +977,8 @@
       return
     }
 
+    modalOpen = true
+
     open(
       SortModal,
       {
@@ -995,7 +1001,10 @@
       },
       SORT_MODAL_OPTIONS,
       {
-        onClose: () => focus()
+        onClose: () => {
+          modalOpen = false
+          focus()
+        }
       }
     )
   }
@@ -1019,6 +1028,8 @@
       return
     }
 
+    modalOpen = true
+
     open(
       TransformModal,
       {
@@ -1051,6 +1062,7 @@
       TRANSFORM_MODAL_OPTIONS,
       {
         onClose: () => {
+          modalOpen = false
           focus()
           if (onClose) {
             onClose()
@@ -1540,6 +1552,8 @@
       }
     }
 
+    modalOpen = true
+
     openAbsolutePopup(ContextMenu, props, {
       left,
       top,
@@ -1549,7 +1563,10 @@
       height,
       anchor,
       closeOnOuterClick: true,
-      onClose: focus
+      onClose: () => {
+        modalOpen = false
+        focus()
+      }
     })
   }