02bdbb893b6b0dc34983ebaf6796b06b47dd18ec Tests: Wasn't properly doing…

… a destroy action when there were multiple tables! c23b0484f8dcdd99930365dacd061940ab98f182 Fix: The automatic resize handling wouldn't allow the content to get smaller. The fix took a lot longer than what the title suggests, but it basically boils down to the fact that when you call `.observe()` it will immediately trigger a callback (if the element is visible!) which I very much did not expect. Accounting for that allows things to work as expected. Sync to source repo @c23b0484f8dcdd99930365dacd061940ab98f182
DataTables · Jan 8, 2025 · c53b82b · c53b82b
1 parent fb1c557
commit c53b82b
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 61 deletions.
diff --git a/datatables.json b/datatables.json
@@ -11,5 +11,5 @@
     ],
     "src-repo": "http://github.com/DataTables/DataTablesSrc",
     "last-tag": "2.2.0",
-    "last-sync": "4652edd0ac3e010443a6ec392c94a62d6e424cb5"
+    "last-sync": "c23b0484f8dcdd99930365dacd061940ab98f182"
 }
diff --git a/js/dataTables.js b/js/dataTables.js
@@ -5350,6 +5350,14 @@
 			i, column, columnIdx;
 
 		var styleWidth = table.style.width;
+		var containerWidth = _fnWrapperWidth(settings);
+
+		// Don't re-run for the same width as the last time
+		if (containerWidth === settings.containerWidth) {
+			return false;
+		}
+
+		settings.containerWidth = containerWidth;
 
 		// If there is no width applied as a CSS style or as an attribute, we assume that
 		// the width is intended to be 100%, which is usually is in CSS, but it is very
@@ -5518,46 +5526,33 @@
 		}
 
 		if ( (tableWidthAttr || scrollX) && ! settings._reszEvt ) {
-			var wrapperWidth = function () {
-				return $(settings.nTableWrapper).is(':visible')
-					? $(settings.nTableWrapper).width()
-					: 0;
-			}
-
-			settings.containerWidth = wrapperWidth();
-
 			var resize = DataTable.util.throttle( function () {
-				var newWidth = wrapperWidth();
+				var newWidth = _fnWrapperWidth(settings);
 
-				// Don't do it if destroying, is the same size as last time, or the container
-				// width is 0
-				if (
-					! settings.bDestroying &&
-					settings.containerWidth !== newWidth &&
-					newWidth !== 0
-				) {
-					// Do a resize
+				// Don't do it if destroying or the container width is 0
+				if (! settings.bDestroying && newWidth !== 0) {
 					_fnAdjustColumnSizing( settings );
-					settings.containerWidth = newWidth;
 				}
 			} );
 
 			// For browsers that support it (~2020 onwards for wide support) we can watch for the
 			// container changing width.
 			if (window.ResizeObserver) {
-				settings.resizeObserver = new ResizeObserver(function (e) {
-					var box = e[0].contentBoxSize;
-					var size = Array.isArray(box)
-						? box[0].inlineSize // Spec
-						: box.inlineSize; // Old Firefox
+				// This is a tricky beast - if the element is visible when `.observe()` is called,
+				// then the callback is immediately run. Which we don't want. If the element isn't
+				// visible, then it isn't run, but we want it to run when it is then made visible.
+				// This flag allows the above to be satisfied.
+				var first = $(settings.nTableWrapper).is(':visible');
 
-					// Under this condition a resize will trigger its own resize, causing an error.
-					if (size < settings.containerWidth) {
-						return;
+				settings.resizeObserver = new ResizeObserver(function (e) {
+					if (first) {
+						first = false;
+					}
+					else {
+						resize();
 					}
-
-					resize();
 				});
+
 				settings.resizeObserver.observe(settings.nTableWrapper);
 			}
 			else {
@@ -5569,6 +5564,17 @@
 		}
 	}
 
+	/**
+	 * Get the width of the DataTables wrapper element
+	 *
+	 * @param {*} settings DataTables settings object
+	 * @returns Width
+	 */
+	function _fnWrapperWidth(settings) {
+		return $(settings.nTableWrapper).is(':visible')
+			? $(settings.nTableWrapper).width()
+			: 0;
+	}
 
 	/**
 	 * Get the maximum strlen for each data column
@@ -8931,6 +8937,10 @@
 
 	_api_register( 'columns.adjust()', function () {
 		return this.iterator( 'table', function ( settings ) {
+			// Force a column sizing to happen with a manual call - otherwise it can skip
+			// if the size hasn't changed
+			settings.containerWidth = -1;
+
 			_fnAdjustColumnSizing( settings );
 		}, 1 );
 	} );
@@ -12093,7 +12103,7 @@
 		resizeObserver: null,
 
 		/** Keep a record of the last size of the container, so we can skip duplicates */
-		containerWidth: 0
+		containerWidth: -1
 	};
 
 	/**

diff --git a/js/dataTables.min.js b/js/dataTables.min.js
diff --git a/js/dataTables.min.mjs b/js/dataTables.min.mjs
diff --git a/js/dataTables.mjs b/js/dataTables.mjs
@@ -5315,6 +5315,14 @@ function _fnCalculateColumnWidths ( settings )
 		i, column, columnIdx;
 
 	var styleWidth = table.style.width;
+	var containerWidth = _fnWrapperWidth(settings);
+
+	// Don't re-run for the same width as the last time
+	if (containerWidth === settings.containerWidth) {
+		return false;
+	}
+
+	settings.containerWidth = containerWidth;
 
 	// If there is no width applied as a CSS style or as an attribute, we assume that
 	// the width is intended to be 100%, which is usually is in CSS, but it is very
@@ -5483,46 +5491,33 @@ function _fnCalculateColumnWidths ( settings )
 	}
 
 	if ( (tableWidthAttr || scrollX) && ! settings._reszEvt ) {
-		var wrapperWidth = function () {
-			return $(settings.nTableWrapper).is(':visible')
-				? $(settings.nTableWrapper).width()
-				: 0;
-		}
-
-		settings.containerWidth = wrapperWidth();
-
 		var resize = DataTable.util.throttle( function () {
-			var newWidth = wrapperWidth();
+			var newWidth = _fnWrapperWidth(settings);
 
-			// Don't do it if destroying, is the same size as last time, or the container
-			// width is 0
-			if (
-				! settings.bDestroying &&
-				settings.containerWidth !== newWidth &&
-				newWidth !== 0
-			) {
-				// Do a resize
+			// Don't do it if destroying or the container width is 0
+			if (! settings.bDestroying && newWidth !== 0) {
 				_fnAdjustColumnSizing( settings );
-				settings.containerWidth = newWidth;
 			}
 		} );
 
 		// For browsers that support it (~2020 onwards for wide support) we can watch for the
 		// container changing width.
 		if (window.ResizeObserver) {
-			settings.resizeObserver = new ResizeObserver(function (e) {
-				var box = e[0].contentBoxSize;
-				var size = Array.isArray(box)
-					? box[0].inlineSize // Spec
-					: box.inlineSize; // Old Firefox
+			// This is a tricky beast - if the element is visible when `.observe()` is called,
+			// then the callback is immediately run. Which we don't want. If the element isn't
+			// visible, then it isn't run, but we want it to run when it is then made visible.
+			// This flag allows the above to be satisfied.
+			var first = $(settings.nTableWrapper).is(':visible');
 
-				// Under this condition a resize will trigger its own resize, causing an error.
-				if (size < settings.containerWidth) {
-					return;
+			settings.resizeObserver = new ResizeObserver(function (e) {
+				if (first) {
+					first = false;
+				}
+				else {
+					resize();
 				}
-
-				resize();
 			});
+
 			settings.resizeObserver.observe(settings.nTableWrapper);
 		}
 		else {
@@ -5534,6 +5529,17 @@ function _fnCalculateColumnWidths ( settings )
 	}
 }
 
+/**
+ * Get the width of the DataTables wrapper element
+ *
+ * @param {*} settings DataTables settings object
+ * @returns Width
+ */
+function _fnWrapperWidth(settings) {
+	return $(settings.nTableWrapper).is(':visible')
+		? $(settings.nTableWrapper).width()
+		: 0;
+}
 
 /**
  * Get the maximum strlen for each data column
@@ -8896,6 +8902,10 @@ _api_registerPlural( 'columns().indexes()', 'column().index()', function ( type
 
 _api_register( 'columns.adjust()', function () {
 	return this.iterator( 'table', function ( settings ) {
+		// Force a column sizing to happen with a manual call - otherwise it can skip
+		// if the size hasn't changed
+		settings.containerWidth = -1;
+
 		_fnAdjustColumnSizing( settings );
 	}, 1 );
 } );
@@ -12058,7 +12068,7 @@ DataTable.models.oSettings = {
 	resizeObserver: null,
 
 	/** Keep a record of the last size of the container, so we can skip duplicates */
-	containerWidth: 0
+	containerWidth: -1
 };
 
 /**