FR: Popovers should allow changing size

[ryanmcnamara]

• Package version(s): 1.9.0
• Browser and OS versions: All

There are popovers out there that sometimes change size after being initially rendered.
When they do, especially when they change height and are on the side of the element, the arrow gets misaligned. See this example:

Sometimes this change happens instantaneously when a popover gets opened (say <10ms due to multiple render cycles being needed), sometimes it happens after some time (say >1000ms due to an async call completing perhaps).Probably worth keeping that in mind for animation reasons.

[leebyp]

@ryanmcnamara does the solution proposed here work? #476

If it does, I'll add a note to the docs to mention since it can be a common scenario.

[ryanmcnamara]

It almost does, in my case the popover appears on an element in a scrollable table, so making it inline it tends to overflow outside the table and it is hidden.
I could potentially make it visible through css hacks, but it doesn't seem like a good solution

[llorca]

@ryanmcnamara is there any way you could remove the overflow on that table?

[ryanmcnamara]

The issue is that I have other things in the table (parents or siblings to the popover) that I don't want to overflow

[kaiyoma]

I'm surprised more people haven't run into this. I'm trying to add a DateTimePicker inside a Popover and ran into this issue immediately. The problem is that the number of weeks can change from month to month, so changing the value of one of the controls can result in a change in height, which messes up the rendering of the popover.

First, the popover is opened:

Next, I choose September, which results in an increase in height because of the extra row. Notice how the arrow and the target are now both obscured because the popover is taller:

After waiting a few moments and/or moving the mouse around, the popover shifts into the correct position, but notice that now there's a gray line visible above the arrow:

Now, if I go back to February, the popover gets shorter, but doesn't get positioned immediately, so the rest of the arrow is visible, as is some of the content underneath the popover:

I'm using version 2.0.0-beta.3 of everything (and Chrome 64).

[kaiyoma]

I'm currently working around this by forcing a re-render in the component that creates the Popover. In my case, the sub-component that changes height (a date/time picker) supports a callback that is invoked whenever the view changes, so I can pass () => this.forceUpdate() as the callback function. Now the popover is always rendered in the correct place even if the content changes size.

[llorca]

from @tyscorp in #1719:

Right now this isn't possible to do in userland because we don't have access to Popper#scheduleUpdate.

This can be done in react-popper like this.

If this functionality isn't implemented in blueprint directly because of added complexity and/or dependencies then allowing access to scheduleUpdate would be enough.

I think giving access to scheduleUpdate would require allowing content to be either a component or function and passing scheduleUpdate as props/arguments...

[giladgray]

may be possible with resize observer now

[giladgray]

not breaking so bumping to next release