diff --git a/app/packages/spotlight/src/index.ts b/app/packages/spotlight/src/index.ts
index 689d69e8b1..8a7c6fe155 100644
--- a/app/packages/spotlight/src/index.ts
+++ b/app/packages/spotlight/src/index.ts
@@ -18,7 +18,7 @@ import {
   SCROLLBAR_WIDTH,
   TWO,
   ZERO,
-  ZOOMING_COEFFICIENT
+  ZOOMING_COEFFICIENT,
 } from "./constants";
 import createScrollReader from "./createScrollReader";
 import { Load, RowChange } from "./events";
@@ -107,8 +107,8 @@ export default class Spotlight<K, V> extends EventTarget {
       throw new Error("spotlight is not attached");
     }
 
-    this.#backward?.remove();
-    this.#forward?.remove();
+    this.#backward?.destroy();
+    this.#forward?.destroy();
     this.#element?.classList.remove(styles.spotlightLoaded);
     this.#element?.remove();
     this.#scrollReader?.destroy();
@@ -203,7 +203,7 @@ export default class Spotlight<K, V> extends EventTarget {
               const backward = this.#forward;
               this.#forward = section;
               this.#forward.attach(this.#element);
-              this.#backward.remove();
+              this.#backward.destroy();
               this.#backward = backward;
               offset = before - this.#containerHeight + this.#config.spacing;
             }
@@ -271,7 +271,7 @@ export default class Spotlight<K, V> extends EventTarget {
               this.#backward = result.section;
               this.#backward.attach(this.#element);
 
-              this.#forward.remove();
+              this.#forward.destroy();
               this.#forward = forward;
             }
 
diff --git a/app/packages/spotlight/src/row.ts b/app/packages/spotlight/src/row.ts
index d904e86eb0..3934f4a47b 100644
--- a/app/packages/spotlight/src/row.ts
+++ b/app/packages/spotlight/src/row.ts
@@ -13,6 +13,7 @@ export default class Row<K, V> {
   #from: number;
   #hidden: boolean;
 
+  readonly #aborter: AbortController = new AbortController();
   readonly #config: SpotlightConfig<K, V>;
   readonly #dangle?: boolean;
   readonly #container: HTMLDivElement = create(DIV);
@@ -47,7 +48,7 @@ export default class Row<K, V> {
       element.style.top = pixels(ZERO);
 
       if (config.onItemClick) {
-        element.addEventListener("click", (event) => {
+        const handler = (event) => {
           if (event.metaKey || event.shiftKey) {
             return;
           }
@@ -59,18 +60,13 @@ export default class Row<K, V> {
             item,
             iter,
           });
+        };
+
+        element.addEventListener("click", handler, {
+          signal: this.#aborter.signal,
         });
-        element.addEventListener("contextmenu", (event) => {
-          if (event.metaKey || event.shiftKey) {
-            return;
-          }
-          event.preventDefault();
-          focus(item.id);
-          config.onItemClick({
-            event,
-            item,
-            iter,
-          });
+        element.addEventListener("contextmenu", handler, {
+          signal: this.#aborter.signal,
         });
       }
 
@@ -123,6 +119,10 @@ export default class Row<K, V> {
     return this.#row[this.#row.length - ONE].item.id;
   }
 
+  destroy() {
+    this.#aborter.abort();
+  }
+
   has(item: string) {
     for (const i of this.#row) {
       if (i.item.id.description === item) {
diff --git a/app/packages/spotlight/src/section.ts b/app/packages/spotlight/src/section.ts
index c495aa3dc3..13190bed9d 100644
--- a/app/packages/spotlight/src/section.ts
+++ b/app/packages/spotlight/src/section.ts
@@ -108,6 +108,14 @@ export default class Section<K, V> {
       : element.appendChild(this.#section);
   }
 
+  destroy() {
+    this.#section.remove();
+    for (const row of this.#rows) {
+      row.destroy();
+    }
+    this.#rows = [];
+  }
+
   find(item: string): Row<K, V> | null {
     for (const row of this.#rows) {
       if (row.has(item)) {
@@ -118,11 +126,6 @@ export default class Section<K, V> {
     return null;
   }
 
-  remove() {
-    this.#section.remove();
-    this.#rows = [];
-  }
-
   render({
     config,
     target,