Handle highlight sidebar and popover as one unit for closing them when

clicking elsewhere

Resolves MS-867 and MS-868 #Complete

client/src/helpers/highlight-sidebar.ts

@@ -27,8 +27,17 @@ export default {
     const mountEl = document.createElement('div');
     app?.appendChild(mountEl);
 
+    const clickOutsideElementListener = (event: Event) => {
+      const isInsidePopover = document.querySelector('.highlight-popover')?.contains(event.target as Node);
+      const isInsideSidebar = mountEl.contains(event.target as Node);
+      if (!(isInsidePopover || isInsideSidebar)) {
+        cleanUp();
+      }
+    };
+
     const cleanUp = () => {
       mountEl?.parentNode?.removeChild(mountEl);
+      document.removeEventListener('click', clickOutsideElementListener);
       sidebar.unmount();
     };
 
@@ -48,5 +57,9 @@ export default {
     sidebar.directive('auto-grow', autoGrow); // todo: can this be done a different way? maybe use this declaration inside the component itself
 
     sidebar.mount(mountEl);
+
+    setTimeout(() => {
+      document.addEventListener('click', clickOutsideElementListener);
+    }, 1);
   },
 };

client/src/helpers/popover.ts

@@ -25,7 +25,10 @@ export default {
 
     const clickOutsideElementListener = (event: Event) => {
       // inspired by https://stackoverflow.com/a/3028037/6071058
-      if (!mountEl.contains(event.target as Node)) {
+      const isInsidePopover = mountEl.contains(event.target as Node); // the click happened inside the Popover
+      // const isInsideWrapper = wrapper.contains(event.target as Node); // the click happened inside the wrapper
+      const isInsideSidebar = document.querySelector('.highlight-sidebar')?.contains(event.target as Node); // the click happened inside the HighlightSidebar
+      if (!(isInsidePopover || isInsideSidebar)) {
         _reject();
         cleanUp();
       }