Listen to pointerdown events instead of click in Autocapture to track dropdown menus target properly

[mbektimirov]

The problem

I've trapped into the issue when dropdown menu trigger (implemented with radix dropdown menu) click events are not tracked by PostHog Autocapture. The problem is the target value of a click event is always the html root node. So basically click on the Actions button is not tracked by posthog:

<DropdownMenu.Root onOpenChange={onOpenChange} modal={false}>
  <DropdownMenu.Trigger asChild>
    <Button>Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content asChild>
      <Stack gap={8} {...rootMenuStackProps}>
        <RenderMenu items={items} menuWidth={menuWidth} />
      </Stack>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

Reproduction

// output when clicked on Action button: html
document.addEventListener('click', e => console.log(e.target), true) 

// output when clicked on Action button: <span class="..."> -- button child element
document.addEventListener('pointerdown', e => console.log(e.target), true) 

Solution

The solution to this is to track pointerdown events as described in this radix discussion: radix-ui/primitives#2264 (reply in thread)
ChatGPT outlined the root problem very well:

Is there a way to add an option to change click to pointerdown event on PostHog init?