From 80db80b2b57a5199e1fc139a758970c295c7aa17 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan@datatables.net>
Date: Fri, 17 Mar 2023 17:39:39 +0000
Subject: [PATCH] Fix: `responsive-display` was incorrectly firing for all rows
 when changing page Fix: When resizing the window the modal would update to
 show the information for the last row on the page, regardless of what row
 details should have been shown

---
 js/dataTables.responsive.js | 19 +++++++++++++------
 js/responsive.bootstrap.js  | 12 ++++++++++++
 js/responsive.bootstrap4.js | 12 ++++++++++++
 js/responsive.bootstrap5.js | 12 ++++++++++++
 js/responsive.bulma.js      | 12 ++++++++++++
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/js/dataTables.responsive.js b/js/dataTables.responsive.js
index fba908c..308ee31 100644
--- a/js/dataTables.responsive.js
+++ b/js/dataTables.responsive.js
@@ -681,7 +681,7 @@ $.extend( Responsive.prototype, {
 				}
 			);
 
-			if ( res === true || res === false ) {
+			if ( typeof res === 'boolean' ) {
 				event(res);
 			}
 		}
@@ -833,8 +833,6 @@ $.extend( Responsive.prototype, {
 		var dt = this.s.dt;
 
 		dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
-			var row = dt.row( idx );
-
 			that._detailsDisplay( dt.row( idx ), true );
 		} );
 	},
@@ -1216,6 +1214,7 @@ Responsive.display = {
 				var modal = $('<div class="dtr-modal"/>')
 					.append( $('<div class="dtr-modal-display"/>')
 						.append( $('<div class="dtr-modal-content"/>')
+							.data('dtr-row-idx', row.index())
 							.append( render() )
 						)
 						.append( $('<div class="dtr-modal-close">&times;</div>' )
@@ -1240,9 +1239,17 @@ Responsive.display = {
 				} );
 			}
 			else {
-				$('div.dtr-modal-content')
-					.empty()
-					.append( render() );
+				var modal = $('div.dtr-modal-content');
+
+				if (modal.length && row.index() === modal.data('dtr-row-idx')) {
+					modal
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown, nothing to update
+					return null;
+				}
 			}
 
 			if ( options && options.header ) {
diff --git a/js/responsive.bootstrap.js b/js/responsive.bootstrap.js
index 01b6a4f..3fd7c04 100644
--- a/js/responsive.bootstrap.js
+++ b/js/responsive.bootstrap.js
@@ -39,10 +39,22 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}
diff --git a/js/responsive.bootstrap4.js b/js/responsive.bootstrap4.js
index 4b8cd77..0f27af2 100644
--- a/js/responsive.bootstrap4.js
+++ b/js/responsive.bootstrap4.js
@@ -39,10 +39,22 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}
diff --git a/js/responsive.bootstrap5.js b/js/responsive.bootstrap5.js
index bf9e212..d20f196 100644
--- a/js/responsive.bootstrap5.js
+++ b/js/responsive.bootstrap5.js
@@ -53,12 +53,24 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 
 				modal.show();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown for this row - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}
diff --git a/js/responsive.bulma.js b/js/responsive.bulma.js
index ba0ea5a..f4fb0f9 100644
--- a/js/responsive.bulma.js
+++ b/js/responsive.bulma.js
@@ -34,6 +34,7 @@ _display.modal = function ( options ) {
 				.append( render() );
 
 			_modal
+				.data('dtr-row-idx', row.index())
 				.appendTo( 'body' );
 
 			_modal.addClass('is-active is-clipped');
@@ -47,6 +48,17 @@ _display.modal = function ( options ) {
 				closeCallback();
 			});
 		}
+		else {
+			if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+				_modal.find( 'div.modal-body' )
+					.empty()
+					.append( render() );
+			}
+			else {
+				// Modal not shown - do nothing
+				return null;
+			}
+		}
 
 		return true;
 	};