BlueprintJS Overlay/Portal not closing properly

Question

I'm new to Blueprint, but I have a pretty simple overlay implementation using BP. The problem I'm having is that the portal isn't 'going away' after the user clicks on the background. The content disappears and for all purposes it appears that the overlay is closed, but you can't interact with the page at all.

The overlay:

<Overlay isOpen={open === 'error'} onClose={onClose} >
    <Card>
        There was an error.
    </Card>
</Overlay>

onClose simply sets the open value to an empty string.

Answer 1

I solved this, I have the overlay class to display: flex with height: 100vh in order to get the content displayed in the middle of the screen. With that, the container/portal covers the content behind it. Simply setting the height to 0 w/ a transition makes it transition out nicely and solves the problem:

const StyledOverlay = styled(Overlay)`
    display: flex;
    justify-content: center;
    align-items: center;
    height: ${props => props.isOpen ? '100vh' : 0};
    transition: height 250s
`;