fix: Handle shortcuts being triggered on non-main workspace. (#598)

* fix: Handle shortcuts being triggered on non-main workspace.

* chore: Satisfy the linter.

* chore: Remove unneeded cast.

Author: gonfunko

src/actions/action_menu.ts

@@ -54,14 +54,8 @@ export class ActionMenu {
       callback: (workspace) => {
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.WORKSPACE:
+          case Constants.STATE.FLYOUT:
             return this.openActionMenu(workspace);
-          case Constants.STATE.FLYOUT: {
-            const flyoutWorkspace = workspace.getFlyout()?.getWorkspace();
-            if (flyoutWorkspace) {
-              return this.openActionMenu(flyoutWorkspace);
-            }
-            return false;
-          }
           default:
             return false;
         }

src/actions/arrow_navigation.ts

@@ -59,7 +59,9 @@ export class ArrowNavigation {
       shortcut: ShortcutRegistry.KeyboardShortcut,
     ): boolean => {
       const toolbox = workspace.getToolbox() as Toolbox;
-      const flyout = workspace.getFlyout();
+      const flyout = workspace.isFlyout
+        ? workspace.targetWorkspace?.getFlyout()
+        : workspace.getFlyout();
       let isHandled = false;
       switch (this.navigation.getState(workspace)) {
         case Constants.STATE.WORKSPACE:
@@ -91,7 +93,9 @@ export class ArrowNavigation {
       e: Event,
       shortcut: ShortcutRegistry.KeyboardShortcut,
     ): boolean => {
-      const toolbox = workspace.getToolbox() as Toolbox;
+      const toolbox = workspace.isFlyout
+        ? workspace.targetWorkspace?.getToolbox()
+        : workspace.getToolbox();
       let isHandled = false;
       switch (this.navigation.getState(workspace)) {
         case Constants.STATE.WORKSPACE:
@@ -156,8 +160,6 @@ export class ArrowNavigation {
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
           keyboardNavigationController.setIsActive(true);
-          const toolbox = workspace.getToolbox() as Toolbox;
-          const flyout = workspace.getFlyout();
           let isHandled = false;
           switch (this.navigation.getState(workspace)) {
             case Constants.STATE.WORKSPACE:
@@ -175,14 +177,19 @@ export class ArrowNavigation {
               return isHandled;
             case Constants.STATE.FLYOUT:
               isHandled = this.fieldShortcutHandler(workspace, shortcut);
-              if (!isHandled && flyout) {
-                if (!this.navigation.defaultFlyoutCursorIfNeeded(workspace)) {
-                  flyout.getWorkspace()?.getCursor()?.next();
+              if (!isHandled && workspace.targetWorkspace) {
+                if (
+                  !this.navigation.defaultFlyoutCursorIfNeeded(
+                    workspace.targetWorkspace,
+                  )
+                ) {
+                  workspace.getCursor()?.next();
                 }
                 isHandled = true;
               }
               return isHandled;
-            case Constants.STATE.TOOLBOX:
+            case Constants.STATE.TOOLBOX: {
+              const toolbox = workspace.getToolbox() as Toolbox;
               if (toolbox) {
                 if (!toolbox.getSelectedItem()) {
                   const firstItem =
@@ -201,6 +208,7 @@ export class ArrowNavigation {
                 }
               }
               return isHandled;
+            }
             default:
               return false;
           }
@@ -214,8 +222,6 @@ export class ArrowNavigation {
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
           keyboardNavigationController.setIsActive(true);
-          const flyout = workspace.getFlyout();
-          const toolbox = workspace.getToolbox() as Toolbox;
           let isHandled = false;
           switch (this.navigation.getState(workspace)) {
             case Constants.STATE.WORKSPACE:
@@ -234,19 +240,20 @@ export class ArrowNavigation {
               return isHandled;
             case Constants.STATE.FLYOUT:
               isHandled = this.fieldShortcutHandler(workspace, shortcut);
-              if (!isHandled && flyout) {
+              if (!isHandled && workspace.targetWorkspace) {
                 if (
                   !this.navigation.defaultFlyoutCursorIfNeeded(
-                    workspace,
+                    workspace.targetWorkspace,
                     'last',
                   )
                 ) {
-                  flyout.getWorkspace()?.getCursor()?.prev();
+                  workspace.getCursor()?.prev();
                 }
                 isHandled = true;
               }
               return isHandled;
-            case Constants.STATE.TOOLBOX:
+            case Constants.STATE.TOOLBOX: {
+              const toolbox = workspace.getToolbox() as Toolbox;
               if (toolbox) {
                 // @ts-expect-error private method
                 isHandled = toolbox.selectPrevious();
@@ -256,6 +263,7 @@ export class ArrowNavigation {
                 }
               }
               return isHandled;
+            }
             default:
               return false;
           }

src/actions/enter.ts

@@ -67,13 +67,16 @@ export class EnterAction {
             this.handleEnterForWS(workspace);
             return true;
           case Constants.STATE.FLYOUT:
-            flyoutCursor = this.navigation.getFlyoutCursor(workspace);
+            if (!workspace.targetWorkspace) return false;
+            flyoutCursor = this.navigation.getFlyoutCursor(
+              workspace.targetWorkspace,
+            );
             if (!flyoutCursor) {
               return false;
             }
             curNode = flyoutCursor.getCurNode();
             if (curNode instanceof BlockSvg) {
-              this.insertFromFlyout(workspace);
+              this.insertFromFlyout(workspace.targetWorkspace);
             } else if (curNode instanceof FlyoutButton) {
               this.triggerButtonCallback(workspace);
             }

src/actions/exit.ts

@@ -34,7 +34,7 @@ export class ExitAction {
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.FLYOUT:
           case Constants.STATE.TOOLBOX:
-            getFocusManager().focusTree(workspace);
+            getFocusManager().focusTree(workspace.targetWorkspace ?? workspace);
             if (!Gesture.inProgress()) {
               workspace.hideChaff();
             }

src/navigation_controller.ts

@@ -203,7 +203,9 @@ export class NavigationController {
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.WORKSPACE:
             Blockly.getFocusManager().focusTree(
-              workspace.getToolbox() ?? workspace.getFlyout() ?? workspace,
+              workspace.getToolbox() ??
+                workspace.getFlyout()?.getWorkspace() ??
+                workspace,
             );
             return true;
           default:

test/webdriverio/test/flyout_test.ts

@@ -138,6 +138,7 @@ suite('Toolbox and flyout test', function () {
 
   test('Tabbing to the workspace should close the flyout', async function () {
     await tabNavigateToWorkspace(this.browser);
+    await this.browser.pause(PAUSE_TIME);
 
     // The flyout should be closed since it lost focus.
     const flyoutIsOpen = await checkIfFlyoutIsOpen(this.browser);