From 1101fe3bffdea68b45058f6467ffe434462408dc Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 19 Mar 2021 16:54:19 -0700
Subject: [PATCH] fix(context-menu): correctly tab in/out of nested menus

---
 src/ContextMenu/ContextMenu.svelte       |  1 +
 src/ContextMenu/ContextMenuOption.svelte | 26 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index c89bfb13..acc11e5c 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -113,6 +113,7 @@
   }}"
   on:keydown
   on:keydown="{(e) => {
+    if ($hasPopup) return;
     if (e.key === 'ArrowDown') {
       if (focusIndex < options.length - 1) focusIndex++;
     } else if (e.key === 'ArrowUp') {
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index bb9b630f..4e0f2214 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -60,6 +60,8 @@
   let rootMenuPosition = [0, 0];
   let currentIndex = -1;
   let submenuOpen = false;
+  let focusIndex = 0;
+  let options = [];
 
   const unsubCurrentIndex = ctx.currentIndex.subscribe((index) => {
     currentIndex = index;
@@ -186,13 +188,33 @@
 
       await tick();
 
-      const options = ref.querySelectorAll('li[tabindex]');
+      options = [...ref.querySelectorAll('li[tabindex]')];
 
-      if (options[0]) options[0].focus();
+      if (options[focusIndex]) options[focusIndex].focus();
 
       return;
     }
 
+    if (submenuOpen) {
+      if (key === 'ArrowLeft') {
+        submenuOpen = false;
+        focusIndex = 0;
+        return;
+      }
+
+      if (key === 'ArrowDown') {
+        if (focusIndex < options.length - 1) focusIndex++;
+      } else if (key === 'ArrowUp') {
+        if (focusIndex === -1) {
+          focusIndex = options.length - 1;
+        } else {
+          if (focusIndex > 0) focusIndex--;
+        }
+      }
+
+      if (options[focusIndex]) options[focusIndex].focus();
+    }
+
     if (key === ' ' || key === 'Enter') {
       handleClick({ fromKeyboard: true });
     }