Fix order of selected namespaces jumping while menu is open

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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)
+        +this.optionsSortingSelected.has(right)
-        - +selectedNames.has(left)
+        - +this.optionsSortingSelected.has(left)
     ));
 
     return [
@@ -82,8 +99,6 @@ export class NamespaceSelectFilterModel {
     );
   }
 
-  readonly menuIsOpen = observable.box(false);
-
   @action
   closeMenu() {
     this.menuIsOpen.set(false);