How to get the click target when a DropdownMenu or Select is clicked?

[holdenmatt]

I'm building an app that adds a click listener to document like this:

document.addEventListener("click", (e) => {
   // if e.target is in a parent container, ignore this event
   // otherwise, perform an action
})

However, it appears that the radix-ui DropdownMenu and Select components don't set their event target to the clicked element (as I'd expect). For some reason, e.target is the html element in my app.

Is there some other way to get the element that was actually clicked (i.e. in the DropdownMenu.Trigger or Select.Trigger)?

Here's a sandbox showing the issue for the DropdownMenu example from the docs:
https://codesandbox.io/s/optimistic-fog-xqypf6?file=/src/App.tsx

If you click the menu, you can see in the console that the event.target is the element, not the trigger button.

Any help is very appreciated, thanks!

[joaom00]

It's because pointer-events: none is applied on body, due to the default modal mode, before the click event happens, the menu is opened on pointerdown, which makes the target to be html

[holdenmatt]

Interesting. If I set modal={false} for the DropdownMenu, it works as expected.

AFAIK, there's no modal prop for <Select>. Is there any workaround I can use there?

[joaom00]

You can listen for pointerdown events or control the select via open and onOpenChange props and open onClick only. (By doing the second option, you will not be able to select an item in one life cycle click i.e. mouse down, mouse move, mouse up.)

const [open, setOpen] = React.useState(false)

<Select.Root open={open} onOpenChange={setOpen}>
  <Select.Trigger onPointerDown={event => even.preventDefault()} onClick={() => setOpen(true)} />
</Select.Root>

[holdenmatt]

Great! Switching to listen to pointerdown instead worked for me, thanks!