Fixes #504

common/deps.ts

@@ -18,8 +18,6 @@ export { styleTags, Tag, tagHighlighter, tags } from "@lezer/highlight";
 export * as YAML from "https://deno.land/std@0.189.0/yaml/mod.ts";
 export * as path from "https://deno.land/std@0.189.0/path/mod.ts";
 
-// export { readAll } from "https://deno.land/std@0.165.0/streams/conversion.ts";
-
 export type {
   BlockContext,
   Element,

common/util.ts

@@ -72,3 +72,39 @@ Loading some onboarding content for you (but doing so does require a working int
 
   return parseYamlSettings(settingsText);
 }
+
+// Compares two objects deeply
+export function deepEqual(a: any, b: any): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (typeof a === "object") {
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) {
+        return false;
+      }
+      for (let i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i])) {
+          return false;
+        }
+      }
+      return true;
+    } else {
+      const aKeys = Object.keys(a);
+      const bKeys = Object.keys(b);
+      if (aKeys.length !== bKeys.length) {
+        return false;
+      }
+      for (const key of aKeys) {
+        if (!deepEqual(a[key], b[key])) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+  return false;
+}

web/components/filter.tsx

@@ -10,6 +10,7 @@ import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.3/src/index
 import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
 import { MiniEditor } from "./mini_editor.tsx";
 import { fuzzySearchAndSort } from "./fuse_search.ts";
+import { deepEqual } from "../../common/util.ts";
 
 export function FilterList({
   placeholder,
@@ -60,8 +61,11 @@ export function FilterList({
       });
     }
 
-    setMatchingOptions(results);
-    setSelectionOption(0);
+    if (!deepEqual(matchingOptions, results)) {
+      // Only do this (=> rerender of UI) if the results have changed
+      setMatchingOptions(results);
+      setSelectionOption(0);
+    }
   }
 
   useEffect(() => {
@@ -70,7 +74,7 @@ export function FilterList({
 
   useEffect(() => {
     function closer() {
-      console.log("Invoking closer");
+      // console.log("Invoking closer");
       onSelect(undefined);
     }