fix(forms): clean up abort listener after timeout

SkyZeroZx · kirjs · commit ae1dc16bb0d3 · 2026-01-07T14:07:28.000-05:00
Removes the abort event listener once the debounce timeout completes. This avoids lingering listeners, prevents potential memory leaks, and ensures the abort logic runs at most once. (cherry picked from commit e7d99f0)
diff --git a/packages/forms/signals/src/api/rules/debounce.ts b/packages/forms/signals/src/api/rules/debounce.ts
@@ -42,8 +42,18 @@ export function debounce<TValue, TPathKind extends PathKind = PathKind.Root>(
 function debounceForDuration(durationInMilliseconds: number): Debouncer<unknown> {
   return (_context, abortSignal) => {
     return new Promise((resolve) => {
-      const timeoutId = setTimeout(resolve, durationInMilliseconds);
-      abortSignal.addEventListener('abort', () => clearTimeout(timeoutId));
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+      const onAbort = () => {
+        clearTimeout(timeoutId);
+      };
+
+      timeoutId = setTimeout(() => {
+        abortSignal.removeEventListener('abort', onAbort);
+        resolve();
+      }, durationInMilliseconds);
+
+      abortSignal.addEventListener('abort', onAbort, {once: true});
     });
   };
 }
diff --git a/packages/forms/signals/test/node/api/debounce.spec.ts b/packages/forms/signals/test/node/api/debounce.spec.ts
@@ -237,6 +237,34 @@ describe('debounce', () => {
         expect(abortSpy).toHaveBeenCalledTimes(1);
         expect(street.value()).toBe('1600 Amphitheatre Pkwy');
       });
+
+      it('should remove abort listener when debounce completes', async () => {
+        const addListenerSpy = spyOn(AbortSignal.prototype, 'addEventListener').and.callThrough();
+        const removeListenerSpy = spyOn(
+          AbortSignal.prototype,
+          'removeEventListener',
+        ).and.callThrough();
+
+        const address = signal({street: ''});
+        const addressForm = form(
+          address,
+          (address) => {
+            debounce(address.street, 1);
+          },
+          options(),
+        );
+        const street = addressForm.street();
+
+        street.setControlValue('1600 Amphitheatre Pkwy');
+        expect(addListenerSpy).toHaveBeenCalledOnceWith('abort', jasmine.any(Function), {
+          once: true,
+        });
+        expect(removeListenerSpy).not.toHaveBeenCalled();
+
+        await timeout(10);
+        expect(street.value()).toBe('1600 Amphitheatre Pkwy');
+        expect(removeListenerSpy).toHaveBeenCalledOnceWith('abort', jasmine.any(Function));
+      });
     });
   });
 
