Close old context menus on open new context menu

Make sure that multiple context menus can't be open at the same time.
mathesar-foundation · Mar 22, 2022 · 8e89315 · 8e89315
1 parent 8dce989
commit 8e89315
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts b/mathesar_ui/src/component-library/common/actions/clickOffBounds.ts
@@ -25,15 +25,15 @@ export default function clickOffBounds(
     }
   }
 
-  document.body.addEventListener('click', outOfBoundsListener, true);
+  document.body.addEventListener('pointerdown', outOfBoundsListener, true);
 
   function update(opts: Options) {
     callback = opts.callback;
     references = opts.references;
   }
 
   function destroy() {
-    document.body.removeEventListener('click', outOfBoundsListener, true);
+    document.body.removeEventListener('pointerdown', outOfBoundsListener, true);
   }
 
   return {

diff --git a/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte b/mathesar_ui/src/component-library/context-menu/__meta__/ContextMenu.stories.svelte
@@ -1,5 +1,9 @@
 <script>
-  import { faFillDrip, faPlus } from '@fortawesome/free-solid-svg-icons';
+  import {
+    faFillDrip,
+    faPlus,
+    faTimes,
+  } from '@fortawesome/free-solid-svg-icons';
   import { Meta, Story } from '@storybook/addon-svelte-csf';
   import MenuItem from '@mathesar-component-library-dir/menu/MenuItem.svelte';
   import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
@@ -42,6 +46,13 @@
     </ContextMenu>
   </div>
 
+  <div class="box with-context" has-background>
+    <p>This box <em>also</em> has a context menu.</p>
+    <ContextMenu>
+      <MenuItem icon={{ data: faTimes }}>I don't do anything</MenuItem>
+    </ContextMenu>
+  </div>
+
   <div class="box without-context">
     <p>This box does <em>not</em> have a context menu.</p>
   </div>