diff --git a/frontend/src/lib/components/PropertyKeyInfo.test.tsx b/frontend/src/lib/components/PropertyKeyInfo.test.tsx new file mode 100644 index 000000000000..30c6a10ef97f --- /dev/null +++ b/frontend/src/lib/components/PropertyKeyInfo.test.tsx @@ -0,0 +1,45 @@ +import '@testing-library/jest-dom' + +import { act, cleanup, fireEvent, render, screen } from '@testing-library/react' + +import { PropertyKeyInfo } from './PropertyKeyInfo' +import { TaxonomicFilterGroupType } from './TaxonomicFilter/types' + +describe('PropertyKeyInfo', () => { + afterEach(() => { + cleanup() + jest.useRealTimers() + }) + + function renderSessionDuration(onWrapperClick = jest.fn()): { name: HTMLElement; overlayText: HTMLElement } { + render( + + ) + const name = screen.getByLabelText('Session duration') + fireEvent.mouseEnter(name) + return { name, overlayText: screen.getByText(/Learn more about how PostHog tracks sessions/) } + } + + it('keeps the overlay open when the pointer moves from the name into it', () => { + jest.useFakeTimers() + const { name, overlayText } = renderSessionDuration() + + fireEvent.mouseOut(name, { relatedTarget: overlayText }) + act(() => { + jest.runOnlyPendingTimers() + }) + + expect(overlayText).toBeInTheDocument() + }) + + it('does not run the onClick of a wrapping element when the overlay is clicked', () => { + const onWrapperClick = jest.fn() + const { overlayText } = renderSessionDuration(onWrapperClick) + + fireEvent.click(overlayText) + + expect(onWrapperClick).not.toHaveBeenCalled() + }) +}) diff --git a/frontend/src/lib/components/PropertyKeyInfo.tsx b/frontend/src/lib/components/PropertyKeyInfo.tsx index 381b842ecf0e..7bbd18b42cf0 100644 --- a/frontend/src/lib/components/PropertyKeyInfo.tsx +++ b/frontend/src/lib/components/PropertyKeyInfo.tsx @@ -115,6 +115,10 @@ const PropertyKeyInfoBase = React.forwardRef } visible={popoverVisible} + // React bubbles a click in the portaled overlay to the onClick of any element that wraps this component + onClickInside={(e) => e.stopPropagation()} + onMouseEnterInside={() => setPopoverVisible(true)} + onMouseLeaveInside={() => setPopoverVisible(false)} showArrow placement="right" > diff --git a/frontend/src/taxonomy/transformations.tsx b/frontend/src/taxonomy/transformations.tsx index bdb74c34a328..971ae5e48b5b 100644 --- a/frontend/src/taxonomy/transformations.tsx +++ b/frontend/src/taxonomy/transformations.tsx @@ -33,7 +33,9 @@ function transformDescription(description: string): React.ReactNode { const [_, text, url] = linkMatch return ( - {text} + + {text} + ) }