Support host and ref options in Menu.open

[ianthomas23]

I would like to add host and ref HTMLElement options to Menu.open.

Currently Menu.open always adds the menu div to the DOM as the last child of the document.body. This has caused a problem in ipydatagrid as although it does give the correct behaviour in JupyterLab, it is not correct for NbClassic, Voila, etc, as their different DOM structure directly under the body means the menus have been appearing in the wrong location (full analysis is in this ipydatagrid comment).

Menu.open doesn't give us any control over where the menu is inserted in the DOM, but Widget.attach (which is what is called by Menu.open) does via the arguments host (the parent element to insert under) and ref (the element to insert before). The proposal here therefore is to expose these two arguments via Menu.IOptions in Menu.open.

The workaround in ipydatagrid PR jupyter-widgets/ipydatagrid#509 is to let the menu be attached as normal to body by calling Menu.open, then immediately use Widget.detach and Widget.attach to move it to the desired location in the DOM. By exposing the host and ref in Menu.open we will be able to change ipydatagrid to attach it directly to the correct location and avoid having to detach and reattach it.

Strictly speaking the ipydatagrid use case only needs the ref option and not the host one. But I think it best to add all rather than part of the API to control exactly where in the DOM the menu is added.

I will submit a PR for this shortly.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[ianthomas23]

This was fixed by #700.