Popover2: portalClassname is not actually applied to portal

[domehead100]

Environment

Chrome browser

• Package version(s): 0.1.2
• Operating System: Windows
• Browser name and version: Chrome 88.0.4324.104

Code Sandbox

I've looked through the issues and this has come up multiple times, and the issues have always been closed, sometimes stating it is fixed. It is not, unless I'm missing something. The short of it is that a classname supplied in portalClassName to a Tooltip (or Tooltip2 or Popover or Popover2) is not applied to the actual .bp3-portal but to its first child.

I have a tooltip and I need usePortal=true and I need to set the z-index on that portal to be higher than another popup (a dropdown component not from blueprint). I cannot set the z-index on the portal (without resorting to javascript).

Link to a minimal repro (fork this code sandbox):
https://codesandbox.io/s/blueprint-sandbox-forked-b146j?file=/src/index.tsx

Steps to reproduce

1. Create a tooltip and pass a portalClassName prop
2. Notice that the portalClassName is not actually applied to the portal but to it's first child, the overlay
3. Notice that you are unable to, for example, set the z-index on the portal because you cannot access it without writing custom code to go find it in the DOM

Actual behavior

I passed portalClassName to a Tooltip (also Tooltip2), and it did not apply this class to the portal but to it's first child, the overlay. I also notice that the classname of the overlay seems odd in that when the tooltip is shown the classname becomes .bp3-overlay and when the tooltip is not shown the classname is .bp3-overlay-open; this seems backward, but just pointing that out.

Expected behavior

I need to ensure that a tooltip appears on top of some other content that is popped up (a dropdown), so I need to be able to set the z-index of the tooltip higher than the other content. I must use a portal in my use case, but I cannot set the z-index on the portal because I cannot locate it in the DOM without using a ref and custom javascript because the portalClassName is not applied to the portal but to its first child, the overlay.

Possible solution

Maybe I'm missing something. A fix seems like it would be to actually do what the portalClassName prop's documentation says it will do, though that would be a breaking change. Maybe create a new prop called actualPortalClassName?

[adidahiya]

Thanks for the detailed issue report. It looks like this is a bug that has been present since the beginning of this open source repo! But luckily since you've pointed it out at a good time, I can easily fix this in Popover2 with a breaking change, and the fix will be mainlined in v4.0.

The fix is pretty simple, just need to adjust how we send props to Overlay in Popover2...

<Overlay
-   className={this.props.popoverClassName}
+   popoverClassName={this.props.popoverClassName}