Polaris-react: Popovers disappear/don't appear when vertical height is limited

Created on 24 Sep 2018 · 3Comments · Source: Shopify/polaris-react

Issue summary

When there's not a lot of vertical viewport height in the browser, popovers will not appear (or will disappear as viewport height is reduced). This can be especially noticeable in embedded apps, as there's the Shopify header and app header which takes up additional vertical height.

Expected behavior

The popover will be displayed regardless of viewport height, but the content area will scroll to make the content accessible.

Actual behavior

If there's not enough viewport height when the popover open prop is toggled to true, the popover won't display at all. If the browser window height is reduced while the popover is already visible, it will disappear if it's reduced enough.

Steps to reproduce the problem

Create a popover with content that takes up a decent amount of vertical space (Good examples are ColorPicker and DatePicker components)
Open the popover using the defined activator.
Reduce the height of the browser window and eventually it'll disappear.
Increase the height of the browser and it'll reappear.

An example of this happening can be seen in the GIF below and the code is available on this sandbox. This particular example is of the popover disappearing when the height is reduced manually, because it's the easiest to reproduce. The other problem where the popover simply doesn't seem to appear at all is the same problem. Once you've found the height where the popover doesn't appear, you can toggle the activator and never see the popover.

Popover disappearing