Access ContextMenu's DOM node from a parent component

[the-realtom]

For things like controlling focus, selection, getting size/position etc. we need a reference to the DOM node of ContextMenu.

Version

1.9.2

Test Case

1. The trigger element is right-clicked which causes the context menu to open. The trigger element has now gained focus.
2. When an item in the context menu is clicked (specifically the mousedown event), the trigger element will lose focus.
3. To prevent this from happening, the default action for the mousedown event needs to be prevented (using preventDefault). We need to be able to attach an event handler to the ContextMenu from its parent. Currently the only way to do this is using findDOMNode which is discouraged.

Example JSFiddle

Possible Solutions

1. To allow the parent to access the <nav> element's ref, a callback function could be provided as a prop which could then be invoked with the DOM element. You could invoke it straight after this.menu is assigned:
   

   react-contextmenu/src/ContextMenu.js

   Lines 218 to 220 in d2ec76e

   	menuRef = (c) => {
   	this.menu = c;
   	}

2. An alternative solution (which would only solve the test case shown above) would be to allow a custom function to be provided as props, which would then be used as the onMouseDown event handler. You could do this in either ContextMenu or MenuItem (I think). MenuItem already does a similar thing for the onClick handler, so you could essentially replicate that.

I'm happy to make a PR with whatever changes you see fit.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.