From a3050348e292a7e30857d6236ff149a9dec09c9f Mon Sep 17 00:00:00 2001 From: mfo Date: Tue, 3 Sep 2024 15:52:16 +0200 Subject: [PATCH] fix(autoresize_controller.ts): ensure to bind autoresize-textarea when element is visible, otherwise it is not expanded by 5 rows as expected by default cleaner ts implementation Co-authored-by: Colin Darie --- .../controllers/autoresize_controller.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) 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'); } }