Should onPointerDown event on DropdownMenuTrigger replaced with onClick handler?

[mellosti]

I am trying to use the DropdownMenu on a component that can be dragged. However, the onPointerDown handler (see here) on the DropdownMenuTrigger prevents the trigger from being dragged. I replaced it with onClick and solved the issue locally. I can now both drag the trigger and also click to open the dropdown.

Why is onPointerDown used instead of onClick? Can we replace it?

My code:

    <DropdownMenu>
      <DropdownMenuTrigger asChild>
       <button draggable={true} onDrag={onDrag} ...>Drag me!</button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
          ...
      </DropdownMenuContent>
    </DropdownMenu>

[duhaime]

@chaance @hadihallak is this library still maintained?

[chaance]

Yes, it's still maintained. This behavior is by design. Opening the menu on pointerdown more closely mirrors behavior of dropdown menus on native platforms.

I'm not sure we can handle this case internally without creating a delay on the open state to try and determine the user's intent to drag, which isn't a great UX for the vast majority of users. This would also pose some accessibility challenges.

You should be able to work around this by controlling the state yourself and only calling the change handler when the user has completed a click. Might add a bit of complexity to your code, but I'm not convinced this should be baked into the component's behavior.