Fix end listener

otomad · Apr 16, 2024 · a426f80 · a426f80
1 parent 4ab4e48
commit a426f80
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/Transition.tsx b/src/Transition.tsx
@@ -712,7 +712,11 @@ const Transition = functionModule(
 					{...props}
 					{...(props.timeout != null ?
 						{ timeout: props.timeout }
-					:	{ nodeRef, addEndListener: endListener() })}
+					:	{
+							nodeRef,
+							addEndListener:
+								props.addEndListener ?? endListener(),
+						})}
 				>
 					{cloneRef(props.children as ReactNode, nodeRef)}
 				</TransitionComponent>

diff --git a/src/utils/cloneRef.ts b/src/utils/cloneRef.ts
@@ -64,13 +64,11 @@ export function endListener() {
 	 * @param done A callback function to be executed when the animation ends.
 	 */
 	return (node: HTMLElement, done: () => void) => {
-		node?.addEventListener(
-			"transitionend",
-			(e) => {
-				if (e.target !== e.currentTarget) return;
-				done();
-			},
-			false,
-		);
+		const listener = (e: TransitionEvent) => {
+			if (e.target !== e.currentTarget) return;
+			node?.removeEventListener("transitionend", listener, false);
+			done();
+		};
+		node?.addEventListener("transitionend", listener, false);
 	};
 }