From 00607861a96826b2e1c9fec37159065680ff278e Mon Sep 17 00:00:00 2001
From: Jae Sung Park <alberto.park@gmail.com>
Date: Thu, 17 Oct 2024 19:17:13 +0900
Subject: [PATCH] fix(point): fix sensitivity error when blank area is clicked

- prevent getting attribute value from undefined value
- treat point.senstivity correctly

Fix #3900
---
 src/ChartInternal/interactions/eventrect.ts |  7 ++--
 test/shape/point-spec.ts                    | 43 +++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
index 59aaee101..ca3887540 100644
--- a/src/ChartInternal/interactions/eventrect.ts
+++ b/src/ChartInternal/interactions/eventrect.ts
@@ -671,6 +671,7 @@ export default {
 	clickHandlerForMultipleXS(ctx): void {
 		const $$ = ctx;
 		const {config, state} = $$;
+		const pointSensitivity = config.point_sensitivity;
 		const targetsToShow = $$.filterTargetsToShow($$.data.targets);
 
 		if ($$.hasArcType(targetsToShow)) {
@@ -679,9 +680,9 @@ export default {
 
 		const mouse = getPointer(state.event, this);
 		const closest = $$.findClosestFromTargets(targetsToShow, mouse);
-		const sensitivity = config.point_sensitivity === "radius" ?
-			closest.r :
-			config.point_sensitivity;
+		const sensitivity = pointSensitivity === "radius" ? closest?.r : (
+			isFunction(pointSensitivity) ? closest && pointSensitivity(closest) : pointSensitivity
+		);
 
 		if (!closest) {
 			return;
diff --git a/test/shape/point-spec.ts b/test/shape/point-spec.ts
index cdaf503de..2dc174628 100644
--- a/test/shape/point-spec.ts
+++ b/test/shape/point-spec.ts
@@ -388,6 +388,49 @@ describe("SHAPE POINT", () => {
 				done(1);
 			});
 		}));
+
+		it("set options", () => {
+			args = {
+				data: {
+					columns: [
+						["data1", 450],
+					],
+					type: "bubble",
+					onclick: sinon.spy()
+				},
+				point: {
+					sensitivity: "radius"
+				}
+			}
+		});
+
+		it("shouldn't throw error when blank(non shape) area is clicked.", () => {
+            const {eventRect} = chart.internal.$el;
+
+			expect(
+				fireEvent(eventRect.node(), "click", {
+					clientX: 100,
+					clientY: 100
+				}, chart)
+			).to.not.throw;
+		});
+
+		it("set options: poinst.sensitivity=function(){}", () => {
+			args.point.sensitivity = ({r}) => r
+		});
+		
+		it("should data.onclick callback called.", () => {
+			const {circles} = chart.$;
+			const {$el: {eventRect}} = chart.internal;
+			const rect = circles.node().getBoundingClientRect();
+
+			fireEvent(eventRect.node(), "click", {
+				clientX: rect.left + 3,
+				clientY: rect.top + 3
+			}, chart);
+
+			expect(args.data.onclick.called).to.be.true;
+		});
 	});
 
 	describe("point.focus.only", () => {