Add support for popper.js Virtual elements in Popover2

[andyboscor]

Feature request

https://popper.js.org/docs/v2/virtual-elements/

[ro-savage]

This would be an awesome feature to have - mouse following would be really useful when you have a large target.

[adidahiya]

I agree that this would be a nice feature to add. In the meantime, I think you can implement such a feature yourself with Popover2/Tooltip2. Check out my quick version of this in this sandbox:

[tillprochaska]

@adidahiya Thanks for posting the example showing how to implement this with the current Popover component!

One thing that would be really helpful is to retain the default behavior for keyboard navigation/focus behavior, i.e. when focusing the actual target (e.g. a button), the popover would be displayed and the position would be computed relative to the button’s position, but when hovering the button, it would position the popover relative to the cursor position.

[adidahiya]

I believe my approach demonstrated in the code sandbox above will still work with Blueprint v5, but the public instance method to reposition the popover is now called reposition() instead of forceUpdate(). See source:

blueprint/packages/core/src/components/popover/popover.tsx

Line 315 in ae2cb5f

public reposition = () => this.popperScheduleUpdate?.();

[ab-pm]

I don't know about repositioning and everything, but I got this to work with virtual elements using the <Popover>s renderTarget in a controlled context menu popover by setting the ref to such a virtual element:

<Popover
	{…}
	renderTarget={props => {
		const { left, top } = …; // wherever you want to render the overlay (coming from state in my case)
		const rect: DOMRect = {
			width: 0,
			height: 0,
			x: left,
			y: top,
			left,
			top,
			right: left,
			bottom: top,
			toJSON() { return this; },
		};
		// The `renderTarget` in <ContextMenuPopover> uses a
		// `<Portal><div className={Classes.CONTEXT_MENU_VIRTUAL_TARGET} style={contextMenu.targetOffset} ref={props.ref} /></Portal>`
		// but this is too slow to mount (causing jumping context menus) and also is an unnecessary <div> anyway.
		// We use a https://popper.js.org/docs/v2/virtual-elements/ instead, but augmented with some methods that Blueprint's <Popover> expects on its `targetRef` element
		(props.ref as RefCallback<VirtualElement & Pick<HTMLElement, 'closest' | 'contains'>>)({
			getBoundingClientRect() {
				return rect;
			},
			closest() { return null; },
			contains() { return false; },
			contextElement: document.body,
		});
		return …; // whatever else you're rendering as the target, using the `props` except for the `ref`
	}}
/>