[Bug]: InfoLabel does not respect `mountNode` property about fluentui

[Shubhdeep12]

Hi @brhallin @Hotell
Can I try resolving this bug?

It appears there are two issues:

1. divRef.current is passed as null because after the initial render, when divRef gets its value, the component does not re-render.
2. The infoLabel is not functioning correctly when passing mountNode in the infoButton prop. The reasons are:
   a. The infoLabel uses infoButton, which in turn uses PopOver.
   b. The PopOver surface uses Portal when the surface is not inline.
   c. In useInfoButton.tsx, the inline prop has a default value of true, which is causing the issue.
   d. We should either pass inline as false or have inline automatically set to false when mountNode is passed.

Thanks!

[brhallin]

Thanks for investigating the issue and identifying the problem!

We should either pass inline as false or have inline automatically set to false when mountNode is passed.

That's entirely up to the Fluent team, so I won't comment on the best decision. My team, however, now has a way forward -- we'll just add inline: false along with the mountNode prop, and we'll be unblocked.

🍻

[Shubhdeep12]

Sure but we are halfway.

on passing inline: false along with mountNode in infoButton, do create the infoLabel popover inside the mountNode element, but the positioning of the popover is still at infoButton.

Reference: popover is created and gets added in mountNode div element but still shown above the infoButton

[brhallin]

FWIW, in our use case, with the Canvas environment, the mountNode property we're providing points to a valid DOM element and with the addition of inline: false, it's now respecting that element.

[brhallin]

It's possible that the minimal demo I provided is faulty.

[Shubhdeep12]

great!