From 0a0c156e983d5365320929949f1b4d6ee47ca4c9 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 16 Sep 2021 15:25:30 +0300
Subject: [PATCH] Listening global keydown event in <Dock/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dock/dock.tsx | 28 +++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx
index a8cea06d7b..18e58e6e70 100644
--- a/src/renderer/components/dock/dock.tsx
+++ b/src/renderer/components/dock/dock.tsx
@@ -46,19 +46,31 @@ interface Props {
 
 @observer
 export class Dock extends React.Component<Props> {
-  onKeydown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    const { close, closeTab, selectedTab } = dockStore;
+  private element = React.createRef<HTMLDivElement>();
 
-    if (!selectedTab) return;
-    const { code, ctrlKey, shiftKey } = evt.nativeEvent;
+  componentDidMount() {
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown = (evt: KeyboardEvent) => {
+    const { close, selectedTab, closeTab } = dockStore;
+    const { code, ctrlKey, metaKey, shiftKey } = evt;
+    // Determine if user working inside <Dock/> or using any other areas in app
+    const dockIsFocused = this.element?.current.contains(document.activeElement);
+
+    if (!selectedTab || !dockIsFocused) return;
 
     if (shiftKey && code === "Escape") {
       close();
     }
 
-    if (ctrlKey && code === "KeyW") {
-      if (selectedTab.pinned) close();
-      else closeTab(selectedTab.id);
+    if ((ctrlKey && code === "KeyW") || (metaKey && code === "KeyW")) {
+      closeTab(selectedTab.id);
+      this.element?.current.focus();  // Avoid loosing focus when closing tab
     }
   };
 
@@ -105,7 +117,7 @@ export class Dock extends React.Component<Props> {
     return (
       <div
         className={cssNames("Dock", className, { isOpen, fullSize })}
-        onKeyDown={this.onKeydown}
+        ref={this.element}
         tabIndex={-1}
       >
         <ResizingAnchor