From 8c6aabf29b554e454a166310f869aabc24ca0959 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 21 Jun 2022 14:23:14 -0400
Subject: [PATCH] Fix namespace selector not closing after multi select

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 ...amespace-select-filter-model.injectable.ts |  2 ++
 .../namespace-select-filter-model.tsx         | 32 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts b/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
index 087ff4a29b..5b1ed84174 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
+++ b/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
@@ -5,12 +5,14 @@
 import { NamespaceSelectFilterModel } from "./namespace-select-filter-model";
 import { getInjectable } from "@ogre-tools/injectable";
 import namespaceStoreInjectable from "../store.injectable";
+import isMacInjectable from "../../../../common/vars/is-mac.injectable";
 
 const namespaceSelectFilterModelInjectable = getInjectable({
   id: "namespace-select-filter-model",
 
   instantiate: (di) => new NamespaceSelectFilterModel({
     namespaceStore: di.inject(namespaceStoreInjectable),
+    isMac: di.inject(isMacInjectable),
   }),
 });
 
diff --git a/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx b/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
index e529fa55bf..df9de5bb9a 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
@@ -5,7 +5,6 @@
 import React from "react";
 import { observable, action, computed, makeObservable, comparer } from "mobx";
 import type { NamespaceStore } from "../store";
-import { isMac } from "../../../../common/vars";
 import type { ActionMeta } from "react-select";
 import { Icon } from "../../icon";
 import type { SelectOption } from "../../select";
@@ -13,6 +12,7 @@ import { autoBind } from "../../../utils";
 
 interface Dependencies {
   readonly namespaceStore: NamespaceStore;
+  readonly isMac: boolean;
 }
 
 export const selectAllNamespaces = Symbol("all-namespaces-selected");
@@ -21,6 +21,14 @@ export type SelectAllNamespaces = typeof selectAllNamespaces;
 export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>;
 
 export class NamespaceSelectFilterModel {
+  private isSelectionKey = (event: React.KeyboardEvent): boolean  => {
+    if (this.dependencies.isMac) {
+      return event.key === "Meta";
+    }
+
+    return event.key === "Control"; // windows or linux
+  };
+
   constructor(private readonly dependencies: Dependencies) {
     makeObservable(this);
     autoBind(this);
@@ -105,13 +113,17 @@ export class NamespaceSelectFilterModel {
         break;
       case "deselect-option":
         if (typeof action.option === "string") {
+          this.didToggle = true;
           this.dependencies.namespaceStore.toggleSingle(action.option);
         }
         break;
       case "select-option":
         if (action.option?.value === selectAllNamespaces) {
+          this.didToggle = true;
           this.dependencies.namespaceStore.selectAll();
         } else if (action.option) {
+          this.didToggle = true;
+
           if (this.isMultiSelection) {
             this.dependencies.namespaceStore.toggleSingle(action.option.value);
           } else {
@@ -133,14 +145,20 @@ export class NamespaceSelectFilterModel {
   private isMultiSelection = false;
 
   onKeyDown(event: React.KeyboardEvent) {
-    if (isSelectionKey(event)) {
+    if (this.isSelectionKey(event)) {
       this.isMultiSelection = true;
     }
   }
 
+  private didToggle = false;
+
   onKeyUp(event: React.KeyboardEvent) {
-    if (isSelectionKey(event)) {
+    if (this.isSelectionKey(event)) {
       this.isMultiSelection = false;
+
+      if (this.didToggle) {
+        this.closeMenu();
+      }
     }
   }
 
@@ -150,11 +168,3 @@ export class NamespaceSelectFilterModel {
     this.closeMenu();
   }
 }
-
-const isSelectionKey = (event: React.KeyboardEvent): boolean  => {
-  if (isMac) {
-    return event.key === "Meta";
-  }
-
-  return event.key === "Control"; // windows or linux
-};