suppress keyboard-initiated firefox builtin context menu in power_tree.js

change tabulator context menu mixin to listen to contextmenu event
instead of keydown
suppress keyboard-initiated context menu in tabulator context menu mixin

Author: eug3nix

pgmanage/app/static/pgmanage_frontend/src/components/DataEditorTab.vue

@@ -27,7 +27,8 @@
     </div>
   </div>
 
-    <div ref="tabulator" class="tabulator-custom data-grid grid-height" @keydown.delete="clearSelectedData">
+  <div ref="tabulator" class="tabulator-custom data-grid grid-height" @keydown.delete="clearSelectedData">
+    <!-- tabulator placeholder -->
   </div>
 
   <div ref="bottomToolbar" class="data-editor__footer d-flex align-items-center justify-content-end p-2">

pgmanage/app/static/pgmanage_frontend/src/mixins/power_tree.js

@@ -72,6 +72,7 @@ export default {
     });
     const treeEl = document.getElementById(`${this.workspaceId}_tree`);
     if (treeEl) {
+      treeEl.addEventListener("contextmenu", (e) => { e.preventDefault(); return false; });
       treeEl.addEventListener('keydown', this.handleTreeKeyboardNavigation);
     }
   },

pgmanage/app/static/pgmanage_frontend/src/mixins/tabulator_context_menu_mixin.js

@@ -2,15 +2,20 @@ export default {
   watch: {
     tabulator: {
       handler() {
-        this.tabulator.element.addEventListener("keydown", (e) => {
-          if (e.key === "ContextMenu" || (e.shiftKey && e.code === "F10")) {
-            e.preventDefault();
+        this.tabulator.element.addEventListener("contextmenu", (e) => { 
+          e.preventDefault();
+          // this means that is a keyboard event
+          if(e.buttons === 0 ) {
+            e.stopPropagation();
             let selectedRange = this.tabulator.getRanges()[0];
             let selectedCell = selectedRange.getCells()[0][0];
             let cellElement = selectedCell.getElement();
             const rect = cellElement.getBoundingClientRect();
             const event = new MouseEvent("contextmenu", {
               bubbles: true,
+              // button flags make this look like a real mouse event
+              button: 2,
+              buttons: 2,
               clientX: rect.left + rect.width / 2,
               clientY: rect.top + rect.height / 2,
             });