diff --git a/app/javascript/controllers/autoresize_controller.ts b/app/javascript/controllers/autoresize_controller.ts
index 217f5156c..484ddfba2 100644
--- a/app/javascript/controllers/autoresize_controller.ts
+++ b/app/javascript/controllers/autoresize_controller.ts
@@ -3,16 +3,31 @@ import { attach } from '@frsource/autoresize-textarea';
 import { isTextAreaElement } from '@coldwired/utils';
 
 export class AutoresizeController extends ApplicationController {
+  declare observer: IntersectionObserver;
+
   #detach?: () => void;
   connect(): void {
     if (isTextAreaElement(this.element)) {
-      this.#detach = attach(this.element)?.detach;
       this.element.classList.add('resize-none');
+      this.observer = new IntersectionObserver(this.onIntersect.bind(this), {
+        threshold: [0]
+      });
+      this.observer.observe(this.element);
+    }
+  }
+
+  onIntersect(entries: IntersectionObserverEntry[]): void {
+    const visible = entries[0].isIntersecting == true;
+
+    if (visible) {
+      this.#detach = attach(this.element as HTMLTextAreaElement)?.detach;
+      this.observer.unobserve(this.element);
     }
   }
 
   disconnect(): void {
     this.#detach?.();
+    this.observer.unobserve(this.element);
     this.element.classList.remove('resize-none');
   }
 }