✨ Finalize autoresize feature

marcreichel · Feb 13, 2022 · 41b3da9 · 41b3da9
1 parent 3415ba6
commit 41b3da9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/dist/alpine-autosize.js b/dist/alpine-autosize.js
diff --git a/dist/alpine-autosize.js.map b/dist/alpine-autosize.js.map
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,22 @@
 function Autosize(Alpine) {
-    Alpine.directive('autosize', (el) => {
-        el.style.height = '4px';
-        el.style.height = `${el.scrollHeight}px`;
+    Alpine.directive('autosize', (el, {}, { cleanup }) => {
+        const previousResizeValue = el.style.resize;
+        el.style.resize = 'none';
+
+        const handler = (event) => {
+            const element = event.target;
+            element.style.height = '4px';
+            element.style.height = `${element.scrollHeight}px`;
+        };
+
+        handler({ target: el });
+
+        el.addEventListener('input', handler);
+
+        cleanup(() => {
+            el.style.resize = previousResizeValue;
+            el.removeEventListener('input', handler);
+        });
     });
 }