diff --git a/packages/instantsearch.js/src/components/Hits/Hits.tsx b/packages/instantsearch.js/src/components/Hits/Hits.tsx index 316aa5db9f..9ba34900e7 100644 --- a/packages/instantsearch.js/src/components/Hits/Hits.tsx +++ b/packages/instantsearch.js/src/components/Hits/Hits.tsx @@ -3,6 +3,7 @@ import { cx } from '@algolia/ui-components-shared'; import { h } from 'preact'; +import { findInsightsTarget } from '../../lib/insights/listener'; import { warning } from '../../lib/utils'; import Template from '../Template/Template'; @@ -55,7 +56,20 @@ const 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 index 4f90ae893b..4f5f6b4625 100644 --- a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx +++ b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx @@ -3,6 +3,7 @@ import { cx } from '@algolia/ui-components-shared'; import { h } from 'preact'; +import { findInsightsTarget } from '../../lib/insights/listener'; import { warning } from '../../lib/utils'; import Template from '../Template/Template'; @@ -87,7 +88,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 index fa274e2c38..869ebcc246 100644 --- a/packages/instantsearch.js/src/lib/insights/listener.tsx +++ b/packages/instantsearch.js/src/lib/insights/listener.tsx @@ -14,7 +14,7 @@ type WithInsightsListenerProps = { sendEvent?: (event: InsightsEvent) => void; }; -const findInsightsTarget = ( +export const 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 index a622990224..298fe91548 100644 --- 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();