Popper throwing error on Chakra Tooltip hover

[chasinhues]

Bug report

Describe the bug

When hovering over a Tooltip, a popper error appears in console:

Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.

Minimal reproduction

https://codesandbox.io/s/eager-stonebraker-nbxjw?file=/src/App.tsx

Screenshots

[laurensnl]

Same here. Didn't find a solution yet. From my understanding, Popper might be replaced by something else:

we are however not content with the general impression popper has made so far so this is ultimately definitely subject to change

[EllaSharakanski]

Same here. I just upgraded from rc.2 to rc.8 and this error appeared. Before the upgrade, the code was working just fine.

[with-heart]

To give some context on what's going on here:

This error is thrown by popper-core in two cases, both when the "popper" node doesn't exist:

1. When the popper is created
2. When forceUpdate is called on the popper instance

In the case of Tooltip, the "popper" node is the outer div inside the Portal that spreads tooltip.getTooltipWrapperProps:

chakra-ui/packages/tooltip/src/tooltip.tsx

Lines 153 to 158 in efd13e6

	{tooltip.isOpen && (
	<Portal>
	<chakra.div
	{...tooltip.getTooltipWrapperProps()}
	__css={{ zIndex: styles.zIndex }}
	>

getTooltipWrapperProps calls popper.getPopperProps:

chakra-ui/packages/tooltip/src/use-tooltip.ts

Lines 187 to 193 in 6e6b39d

	const getTooltipWrapperProps: PropGetter = (props = {}, _ref = null) =>
	popper.getPopperProps(
	mergeWith(props, {
	style: { transformOrigin: popper.transformOrigin },
	}),
	_ref,
	)

getPopperProps returns an object where ref will call setPopperNode to store the underlying node's ref:

chakra-ui/packages/popper/src/use-popper.ts

Line 164 in 20be8ef

ref: mergeRefs(setPopperNode, _ref),

So the chain of events is that the wrapper div is created and its ref is passed through this layer of functions back to setPopperNode, where it is stored and passed into our use of the useBasePopper hook from react-popper:

chakra-ui/packages/popper/src/use-popper.ts

Lines 127 to 131 in 20be8ef

	const popperJS = useBasePopper(referenceNode as any, popperNode as any, {
	placement,
	strategy: fixed ? "fixed" : "absolute",
	modifiers: customMofidiers.concat(modifiers),
	})

The issue here appears to be that since the wrapper div is conditionally rendered by tooltip.isOpen, popperNode is a null reference whenever the tooltip is not open. I'm not sure what the best course of action would be for fixing this, and I'm also not sure why this suddenly started happening since it seems that this has always been conditionally rendered.

[PawelJ-PL]

In version 1.0.0-rc.5 the problem does not occur. It occurs when upgrading to 1.0.0-rc.8.

[avaragado]

I have a hunch that this issue is related to the changes made around transitions. Between rc.5 and rc.8, various components such as Popover and I think Tooltip moved to use transitions based on framer-motion.

I wonder if popper and framer-motion don't mix? See floating-ui/floating-ui#376 for example.

I'm using Chakra's Popover in my app (as a wrapper for react-select), and the PopoverContent is now rarely appearing in the right place. It certainly did a few rc versions ago. When PopoverContent does appear in the right place, it seems to be because the Popover component isn't included in the first render of its owner component (eg because I'm waiting for network data to load before rendering Popover). If I render Popover on the first render, it's wrongly positioned: usually at the top left of the viewport (I'm using Portal around PopoverContent). Adding isLazy to Popover makes no difference.

Resizing the viewport manually ensures the PopoverContent is correctly positioned next time Popover is open.

Hope that ramble helps...

[segunadebayo]

I just pushed a fix for this @chasinhues. The error was from our custom react-popper implementation.

[joaoviana]

@segunadebayo Thanks for getting this fix in! 😄 when are you expecting to release this?

[nagysandorantal]

What chakra version has the fix?

[smyja]

What chakra version has the fix?

any idea yet?

[Maida90]

LID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';

[Maida90]

what is error