From 753b953df92771fc0a256276f85e219296f47174 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 21 Jun 2022 14:57:25 -0400
Subject: [PATCH] Fix order of selected namespaces jumping while menu is open

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter-model.tsx         | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

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 df9de5bb9a..1485a1da0c 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
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import React from "react";
-import { observable, action, computed, makeObservable, comparer } from "mobx";
+import { observable, action, computed, makeObservable, comparer, reaction } from "mobx";
 import type { NamespaceStore } from "../store";
 import type { ActionMeta } from "react-select";
 import { Icon } from "../../icon";
@@ -32,20 +32,37 @@ export class NamespaceSelectFilterModel {
   constructor(private readonly dependencies: Dependencies) {
     makeObservable(this);
     autoBind(this);
+
+    reaction(
+      () => this.menuIsOpen.get(),
+      (isOpen) => {
+        if (!isOpen) { // falling edge of menu being open
+          this.optionsSortingSelected.replace(this.selectedNames.get());
+        }
+      },
+    );
   }
 
-  readonly selectedNames = computed(() => new Set(this.dependencies.namespaceStore.contextNamespaces), {
+  readonly menuIsOpen = observable.box(false);
+
+  private readonly selectedNames = computed(() => new Set(this.dependencies.namespaceStore.contextNamespaces), {
     equals: comparer.structural,
   });
 
+  /**
+   * This set is only updated on the falling edge of the menu being open. That way while the menu is
+   * open the order of the items doesn't change
+   */
+  private readonly optionsSortingSelected = observable.set<string>(this.selectedNames.get());
+
   readonly options = computed((): readonly NamespaceSelectFilterOption[] => {
     const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName());
     const selectedNames = this.selectedNames.get();
 
     baseOptions.sort((
       (left, right) =>
-        +selectedNames.has(right)
-        - +selectedNames.has(left)
+        +this.optionsSortingSelected.has(right)
+        - +this.optionsSortingSelected.has(left)
     ));
 
     return [
@@ -82,8 +99,6 @@ export class NamespaceSelectFilterModel {
     );
   }
 
-  readonly menuIsOpen = observable.box(false);
-
   @action
   closeMenu() {
     this.menuIsOpen.set(false);