Listening global keydown event in <Dock/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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>) => {
+  private element = React.createRef<HTMLDivElement>();
-    const { close, closeTab, selectedTab } = dockStore;
 
-    if (!selectedTab) return;
+  componentDidMount() {
-    const { code, ctrlKey, shiftKey } = evt.nativeEvent;
+    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 ((ctrlKey && code === "KeyW") || (metaKey && code === "KeyW")) {
-      if (selectedTab.pinned) close();
+      closeTab(selectedTab.id);
-      else 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