@cocreate/resize 1.13.1 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.14.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.13.1...v1.14.0) (2025-04-11)
+
+
+### Bug Fixes
+
+* update observer obseve param to type and and attributeName to attributeFilter ([1bb5e14](https://github.com/CoCreate-app/CoCreate-resize/commit/1bb5e14ae342a0e836bce36551bb4b80c4cd9cba))
+
+
+### Features
+
+* auto height handling for select fields ([11a7bc9](https://github.com/CoCreate-app/CoCreate-resize/commit/11a7bc9b6832361dcc50910ee742693ef9606fbd))
+
 ## [1.13.1](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.13.0...v1.13.1) (2025-01-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/resize",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.",
   "keywords": [
     "resize",

package/src/index.js

@@ -599,19 +599,24 @@ CoCreateResize.prototype = {
 
 // Function to auto-resize the element based on its content
 function autoResizeElement(element) {
-	// Reset height to auto to calculate scrollHeight correctly
-	element.style.height = "auto";
-
-	let scrollHeight;
-	if (element.contentDocument) {
-		scrollHeight = element.contentDocument.body.scrollHeight;
-	} else {
-		// For other elements, get scrollHeight directly
-		scrollHeight = element.scrollHeight;
-	}
+	if (!element) return;
+
+	if (element.tagName === "TEXTAREA") {
+		element.style.height = "auto";
+
+		let scrollHeight;
+		if (element.contentDocument) {
+			scrollHeight = element.contentDocument.body.scrollHeight;
+		} else {
+			// For other elements, get scrollHeight directly
+			scrollHeight = element.scrollHeight;
+		}
 
-	// Set the height of the element to the calculated scrollHeight
-	element.style.height = scrollHeight + "px";
+		// Set the height of the element to the calculated scrollHeight
+		element.style.height = scrollHeight + "px";
+	} else if (element.tagName === "SELECT" && element.multiple) {
+		element.size = Math.max(element.options.length, 1); // Ensure at least 1 visible option
+	}
 }
 
 // Observe the resize of the element
@@ -630,9 +635,9 @@ function initAutoHeight(element) {
 		!(element instanceof HTMLCollection) &&
 		!(element instanceof NodeList) &&
 		!Array.isArray(element)
-	)
+	) {
 		element = [element];
-	else if (!element) {
+	} else if (!element) {
 		element = document.querySelectorAll('[height="auto"]');
 
 		// Add event listener for iframes on load
@@ -647,25 +652,28 @@ function initAutoHeight(element) {
 			false
 		);
 
-		if (element.contentDocument) {
-			// Create a MutationObserver for changes within the iframe's body
-			const observer = new MutationObserver(autoResizeElement);
-			observer.observe(iframeDocument.body, {
-				childList: true,
-				subtree: true
-			});
-
-			// Handle iframe document changes (e.g., if src or srcdoc is modified)
-			element.addEventListener("load", () => {
-				observer.disconnect(); // Disconnect the previous observer
-				observeIframeContent(); // Reinitialize the observer on new document
-			});
-		}
+		// if (element.contentDocument) {
+		// 	// Create a MutationObserver for changes within the iframe's body
+		// 	const observer = new MutationObserver(autoResizeElement);
+		// 	observer.observe(iframeDocument.body, {
+		// 		childList: true,
+		// 		subtree: true
+		// 	});
+
+		// 	// Handle iframe document changes (e.g., if src or srcdoc is modified)
+		// 	element.addEventListener("load", () => {
+		// 		observer.disconnect(); // Disconnect the previous observer
+		// 		observeIframeContent(); // Reinitialize the observer on new document
+		// 	});
+		// }
 	}
 
 	for (let i = 0; i < element.length; i++) {
+		if (element[i].tagName === "TEXTAREA") {
+			element[i].rows = 1;
+		}
 		autoResizeElement(element[i]);
-		observeElementResize(element[i]); // Observe resize changes
+		observeElementResize(element[i]); // Observe resize changes.
 	}
 }
 
@@ -673,7 +681,7 @@ initAutoHeight();
 
 observer.init({
 	name: "CoCreateResize",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: "[resizable]:not([resizable='false'])",
 	callback: function (mutation) {
 		coCreateResize.initElement(mutation.target);
@@ -682,13 +690,22 @@ observer.init({
 
 observer.init({
 	name: "CoCreateResize",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: "[height='auto']",
 	callback: function (mutation) {
 		initAutoHeight(mutation.target);
 	}
 });
 
+observer.init({
+	name: "CoCreateResize",
+	types: ["addedNodes"],
+	selector: "[height='auto'] option",
+	callback: function (mutation) {
+		autoResizeElement(mutation.target.parentElement);
+	}
+});
+
 coCreateResize.init({
 	selector: "[resizable]:not([resizable='false'])",
 	dragLeft: "[resize='left']",