From 20315d678e924e1daa3889a3139ea3ba84aeff8e Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 10 May 2024 16:30:00 +1000
Subject: [PATCH] Remove event listener on resize stop.

---
 .../components/grid-visualizer/grid-item-resizer.js    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
index 240c505b533ec..bc82cb9d8efc0 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
@@ -122,6 +122,9 @@ function GridItemResizerInner( {
 		},
 	};
 
+	// Controller to remove event listener on resize stop.
+	const controller = new AbortController();
+
 	return (
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
@@ -161,7 +164,8 @@ function GridItemResizerInner( {
 					 * isn't directly above the handle, so we try to detect if it happens
 					 * outside the grid and dispatch a mouseup event on the handle.
 					 */
-					const rootElementParent = rootBlockElement.parentElement;
+					const rootElementParent =
+						rootBlockElement.closest( 'body' );
 					rootElementParent.addEventListener(
 						'mouseup',
 						() => {
@@ -169,7 +173,7 @@ function GridItemResizerInner( {
 								new Event( 'mouseup', { bubbles: true } )
 							);
 						},
-						true
+						{ signal: controller.signal, capture: true }
 					);
 				} }
 				onResizeStop={ ( event, direction, boxElement ) => {
@@ -213,6 +217,8 @@ function GridItemResizerInner( {
 						columnSpan: columnEnd - columnStart + 1,
 						rowSpan: rowEnd - rowStart + 1,
 					} );
+					// Removes event listener added in onResizeStart.
+					controller.abort();
 				} }
 			/>
 		</BlockPopoverCover>