From 641f9666b52990b28467b50475fa5280913efd3c Mon Sep 17 00:00:00 2001
From: MiniPear <subairui@icloud.com>
Date: Fri, 26 May 2023 14:57:17 +0800
Subject: [PATCH] fix(event): there is no target for pointerupoutside event
 (#5100)

---
 __tests__/integration/api-chart-on-item-element.spec.ts | 7 ++-----
 __tests__/plots/api/chart-on-item-element.ts            | 2 +-
 src/interaction/event.ts                                | 9 +++++++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/__tests__/integration/api-chart-on-item-element.spec.ts b/__tests__/integration/api-chart-on-item-element.spec.ts
index 3b218593b6..d0c721fa8d 100644
--- a/__tests__/integration/api-chart-on-item-element.spec.ts
+++ b/__tests__/integration/api-chart-on-item-element.spec.ts
@@ -108,13 +108,10 @@ describe('chart.on', () => {
     await fired;
   });
 
-  it('chart.on("interval:pointerupoutside", callback) should provide datum for item element', async () => {
+  it('chart.on("plot:pointerupoutside", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
-    chart.on(
-      `interval:${ChartEvent.POINTER_UPOUTSIDE}`,
-      receiveExpectData(resolve),
-    );
+    chart.on(`plot:${ChartEvent.POINTER_UPOUTSIDE}`, resolve);
     dispatchFirstElementEvent(canvas, 'pointerupoutside');
     await fired;
   });
diff --git a/__tests__/plots/api/chart-on-item-element.ts b/__tests__/plots/api/chart-on-item-element.ts
index 0207728389..4bc4d73ad5 100644
--- a/__tests__/plots/api/chart-on-item-element.ts
+++ b/__tests__/plots/api/chart-on-item-element.ts
@@ -35,7 +35,7 @@ export function chartOnItemElement(context) {
   chart.on('interval:pointermove', log('interval:pointermove'));
   chart.on('interval:pointerenter', log('interval:pointerenter'));
   chart.on('interval:pointerleave', log('interval:pointerleave'));
-  chart.on('interval:pointerupoutside', log('interval:pointerupoutside'));
+  chart.on('plot:pointerupoutside', () => console.log('plot:pointerupoutside'));
 
   chart.on('interval:dragstart', log('interval:dragstart'));
   chart.on('interval:drag', log('interval:drag'));
diff --git a/src/interaction/event.ts b/src/interaction/event.ts
index 363f4e215f..5df1cb5c40 100644
--- a/src/interaction/event.ts
+++ b/src/interaction/event.ts
@@ -17,12 +17,17 @@ export function dataOf(element, view) {
 function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
   return (e) => {
     if (!predicate(e)) return;
-    const { target } = e;
-    const { className: elementType, markType } = target;
 
     // Emit plot events.
     emitter.emit(`plot:${eventType}`, e);
 
+    const { target } = e;
+
+    // There is no target for pointerupoutside event if out of canvas.
+    if (!target) return;
+
+    const { className: elementType, markType } = target;
+
     // If target area is plot area, do not emit extra events.
     if (elementType === 'plot') return;