Fix keyboard event penetration (#115)

Author: imengyu

examples/views/BasicUseage.vue

@@ -19,10 +19,15 @@
           <div @contextmenu="onContextMenu3($event, 'b')">Bottom Center</div>
           <div @contextmenu="onContextMenu3($event, 'br')">Bottom Right</div>
         </div>
+        <div class="box2" style="width: 170px; height: 140px" :tabindex="1" @contextmenu="onContextMenu($event)" @keydown="handleKeyPress">
+          Test keyboard event: Use arrow key to navigate menus.
+          <br>
+          Down div event catch: {{ testDownDivKey }}
+        </div>
       </div>
       <div class="box1" style="flex:1;padding: 50px" @contextmenu="onContextMenu1($event)">
         Test nested menus: Contextmenu In parent
-        <div class="box2" style="width: 170px; height: 100px" @contextmenu="onContextMenu2($event)">
+        <div class="box2" style="width: 170px; height: 50px" @contextmenu="onContextMenu2($event)">
           Contextmenu In child
         </div>
       </div>
@@ -111,6 +116,13 @@ onMounted(() => {
     }).hljs?.highlightAll?.();
 });
 
+const testDownDivKey = ref('None');
+
+function handleKeyPress(e: KeyboardEvent) {
+  console.log('Key press: ', e.key);
+  testDownDivKey.value = e.key;
+}
+
 const members = [
   '1',
   '2',

library/ContextSubMenuWrapper.vue

@@ -140,7 +140,7 @@ function installBodyEvents() {
     if (!props.isFullScreenContainer && container.value)
       container.value.addEventListener("scroll", onBodyScroll, true);
     if (options.value.keyboardControl !== false)
-      document.addEventListener('keydown', onMenuKeyDown);
+      document.addEventListener('keydown', onMenuKeyDown, true);
   }, 50);
 }
 function removeBodyEvents() {
@@ -150,7 +150,7 @@ function removeBodyEvents() {
   if (!props.isFullScreenContainer && container.value)
     container.value.removeEventListener("scroll", onBodyScroll, true);
   if (options.value.keyboardControl !== false)
-    document.removeEventListener('keydown', onMenuKeyDown);
+    document.removeEventListener('keydown', onMenuKeyDown, true);
 }
 
 //For keyboard event, remember which submenu is active