onMouseDown event is not triggered

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.

https://xyflow.com

MIT License

22.07k stars 1.46k forks source link

onMouseDown event is not triggered #4256

Closed shb3014 closed 1 month ago

shb3014 commented 1 month ago

Describe the Bug

I'm at 12.0.0-next.17 (next.12 and 11.11.3 also tested), and it seems that the ReactFlow component itself and the outer div can't receive the onMouseDown event. I need this to trigger window tab selection of a layout package. The workaround mentioned in https://github.com/xyflow/xyflow/issues/1710 doesn't seem to work as the event does not trigger.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

add onMouseDown to ReactFlow component or an outer div.

Expected behavior

The onMouseDown event should fire.

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

No response

bcakmakoglu commented 1 month ago

From what I can tell the mousedown handler is passed to the wrapping <div> but the viewport element is positioned on top so that when you try to catch the mousedown it's already caught by the viewport and won't bubble up to you anymore.

So if onPaneClick doesn't do it for you, you could instead try onPointerDown which should work basically the same for most use-cases.

<ReactFlow {...props} onPointerDown={(event) => alert('pointer down')}>