Setting `triggerTarget` with a ref doesn't actually set Tippy instance's option

Bug description

I was trying to replicate the “Different Trigger Target” feature from tippy.js in React.

When I set the triggerTarget with the parent div’s ref, React re-renders the component and inserts the prop as expected, with the correct reference to the parent node. However, Tippy doesn’t update in this case. triggerTarget ends up being set in the underlying Tippy as null, even though the prop triggerTarget with the correct value is passed into it.

Reproduction

CodeSandbox

• Notice that I logged the ref being set and that it is working as expected. It is initially null, then when the ref updates, it updates the prop.
• However, the underlying Tippy instance’s triggerTarget option REMAINS as null.

My findings

It seems like the problem is here: https://github.com/atomiks/tippy.js-react/blob/846a3764e51d5bc315d433759639a606a7903f95/src/Tippy.js#L87-L96

This code doesn’t run on the first or second render for optimization reasons. However, because my ref is updating in the 2nd render, the options never get updated. Commenting out the return fixes this problem, which proves my hypothesis.

[atomiks]

Just to explain things for clarity:

• 1st render: the instance only just got created so no need to update anything yet
• 2nd render: this is due to the creation effect (setMounted()) so that the component can re-render and use the portal content - it was assumed no options changed in this timeframe (except in this case you’ve listed which I didn’t consider where you can cause a re-render before setMounted() does it itself).
• 3rd+ render: update any options dynamically while the instance is still alive. But, due to the above case you’ve listed, we can’t assume setMounted() will be the “last” render before we can update things.

So we’ll just need to change 3 to 2. Do you want to make a PR for this and a test case?

[jarstelfox]

Does changing < 3 to < 2 work?

I believe so. It is rendering only twice here.

CC @nguyen-darianhuy