fix(internal): bail out of default click if element has a bindEvent p…

…arent
algolia · Mar 14, 2023 · 35028d0 · 35028d0
1 parent 16c096f
commit 35028d0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/packages/instantsearch.js/src/components/Hits/Hits.tsx b/packages/instantsearch.js/src/components/Hits/Hits.tsx
@@ -3,7 +3,10 @@
 import { cx } from '@algolia/ui-components-shared';
 import { h } from 'preact';
 
-import { createInsightsEventHandler } from '../../lib/insights/listener';
+import {
+  createInsightsEventHandler,
+  findInsightsTarget,
+} from '../../lib/insights/listener';
 import { warning } from '../../lib/utils';
 import Template from '../Template/Template';
 
@@ -64,7 +67,20 @@ export default function Hits({
             rootTagName="li"
             rootProps={{
               className: cssClasses.item,
-              onClick: () => {
+              onClick: (event: MouseEvent) => {
+                const targetWithEvent = findInsightsTarget(
+                  event.target as HTMLElement | null,
+                  event.currentTarget as HTMLElement | null,
+                  (element) =>
+                    element.hasAttribute('data-insights-event') ||
+                    (element.hasAttribute('data-insights-method') &&
+                      element.hasAttribute('data-insights-payload'))
+                );
+
+                if (targetWithEvent) {
+                  return;
+                }
+
                 sendEvent('click:internal', hit, 'Hit Clicked');
               },
             }}

diff --git a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx
@@ -3,7 +3,10 @@
 import { cx } from '@algolia/ui-components-shared';
 import { h } from 'preact';
 
-import { createInsightsEventHandler } from '../../lib/insights/listener';
+import {
+  createInsightsEventHandler,
+  findInsightsTarget,
+} from '../../lib/insights/listener';
 import { warning } from '../../lib/utils';
 import Template from '../Template/Template';
 
@@ -96,7 +99,20 @@ const InfiniteHits = ({
             rootTagName="li"
             rootProps={{
               className: cssClasses.item,
-              onClick: () => {
+              onClick: (event: MouseEvent) => {
+                const targetWithEvent = findInsightsTarget(
+                  event.target as HTMLElement | null,
+                  event.currentTarget as HTMLElement | null,
+                  (element) =>
+                    element.hasAttribute('data-insights-event') ||
+                    (element.hasAttribute('data-insights-method') &&
+                      element.hasAttribute('data-insights-payload'))
+                );
+
+                if (targetWithEvent) {
+                  return;
+                }
+
                 sendEvent('click:internal', hit, 'Hit Clicked');
               },
             }}

diff --git a/packages/instantsearch.js/src/lib/insights/listener.tsx b/packages/instantsearch.js/src/lib/insights/listener.tsx
@@ -43,7 +43,7 @@ export const createInsightsEventHandler =
     }
   };
 
-function findInsightsTarget(
+export function findInsightsTarget(
   startElement: HTMLElement | null,
   endElement: HTMLElement | null,
   validator: (element: HTMLElement) => boolean

diff --git a/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts b/packages/instantsearch.js/src/widgets/hits/__tests__/hits-integration-test.ts
@@ -123,7 +123,7 @@ describe('hits', () => {
       );
     });
 
-    test.only('sends a default `click` event when clicking on a hit', async () => {
+    test('sends a default `click` event when clicking on a hit', async () => {
       const { search } = createInstantSearch();
       const { insights, onEvent } = createInsightsMiddlewareWithOnEvent();