fix: tooltip marker blocked elements select (#6695)

moayuisuda · 林舸 · web-flow · commit e754054c3e29 · 2025-03-20T19:00:06.000-07:00
Co-authored-by: 林舸 &lt;anhaohui.ahh@antgroup.com&gt;
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg
@@ -340,6 +340,7 @@
               r="4"
               stroke="rgba(23,131,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -352,6 +353,7 @@
               r="4"
               stroke="rgba(23,131,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -364,6 +366,7 @@
               r="4"
               stroke="rgba(0,201,201,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -376,6 +379,7 @@
               r="4"
               stroke="rgba(0,201,201,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g id="g-svg-49" fill="none" />
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg
@@ -340,6 +340,7 @@
               r="4"
               stroke="rgba(23,131,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -352,6 +353,7 @@
               r="4"
               stroke="rgba(23,131,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -364,6 +366,7 @@
               r="4"
               stroke="rgba(0,201,201,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -376,6 +379,7 @@
               r="4"
               stroke="rgba(0,201,201,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g id="g-svg-49" fill="none" />
diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step0.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step0.svg
@@ -340,6 +340,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -352,6 +353,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -364,6 +366,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -376,6 +379,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g id="g-svg-49" fill="none" />
diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step1.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y/step1.svg
@@ -340,6 +340,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -352,6 +353,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -364,6 +366,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -376,6 +379,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g id="g-svg-49" fill="none" />
diff --git a/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step0.svg b/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step0.svg
@@ -160,6 +160,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -172,6 +173,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -184,6 +186,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -196,6 +199,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -208,6 +212,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step1.svg b/__tests__/integration/snapshots/interaction/indices-line-crosshairs-x-y/step1.svg
@@ -160,6 +160,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -172,6 +173,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -184,6 +186,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -196,6 +199,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -208,6 +212,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/interaction/missing-area-tooltip-marker/step1.svg b/__tests__/integration/snapshots/interaction/missing-area-tooltip-marker/step1.svg
@@ -112,6 +112,7 @@
               r="10"
               stroke="rgba(170,170,170,1)"
               stroke-width="5"
+              pointer-events="none"
             />
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/interaction/points-point-tooltip-marker/step0.svg b/__tests__/integration/snapshots/interaction/points-point-tooltip-marker/step0.svg
@@ -90,6 +90,7 @@
               r="20"
               stroke="rgba(255,255,0,1)"
               stroke-width="5"
+              pointer-events="none"
             />
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/interaction/stocks-line-slider/step1.svg b/__tests__/integration/snapshots/interaction/stocks-line-slider/step1.svg
@@ -6536,6 +6536,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -6548,6 +6549,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -6560,6 +6562,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
           <g>
@@ -6572,6 +6575,7 @@
               r="4"
               stroke="rgba(255,255,255,1)"
               stroke-width="2"
+              pointer-events="none"
             />
           </g>
         </g>
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -479,6 +479,8 @@ function updateMarker(root, { data, style, theme }) {
           r: 4,
           stroke,
           lineWidth: 2,
+          // Prevents blocking clicks on elements behind.
+          pointerEvents: 'none',
           ...style,
         },
       });
