Merge pull request #4756 from mumberrymountain/fix-issue-4751

Fix: use latest IntersectionObserver entry to determine visibility (#4751)

Author: azmy60

src/js/modules/ResizeTable/ResizeTable.js

@@ -111,7 +111,7 @@ export default class ResizeTable extends Module{
 
 	initializeVisibilityObserver(){
 		this.visibilityObserver = new IntersectionObserver((entries) => {
-			this.visible = entries[0].isIntersecting;
+			this.visible = entries[entries.length - 1].isIntersecting;
 
 			if(!this.initialized){
 				this.initialized = true;

test/unit/modules/ResizeTable.spec.js

@@ -100,4 +100,39 @@ describe("ResizeTable module", () => {
         // Clean up
         redrawSpy.mockRestore();
     });
+
+    it('should determine whether to redraw table or not using latest visibility state from batched IntersectionObserver entries', () => {
+		let observedElements = [];
+        let observerCallback;
+        let redrawTableCalled = false;
+
+		// mock intersectionObserver
+		global.IntersectionObserver = jest.fn((callback) => {
+			observerCallback = callback;
+			return {
+				observe: jest.fn((el) => observedElements.push(el)),
+				unobserve: jest.fn(),
+				disconnect: jest.fn()
+			};
+		});
+
+		// mock redrawTable
+		resizeTableMod.redrawTable = function() {
+			redrawTableCalled = true;
+		};
+
+        resizeTableMod.initializeVisibilityObserver();
+
+        // reproduce IntersectionObserver being called when table rendered for the first time
+		observerCallback([
+			{ target: tabulator.element, isIntersecting: true },
+		]);
+
+        observerCallback([
+            { target: tabulator.element, isIntersecting: false },
+            { target: tabulator.element, isIntersecting: true },
+        ]);
+
+        expect(redrawTableCalled).toBe(true);
+    });
 });