stateless+attachToBody props make Popover crash on open

[giogonzo]

Project card

description

Uncaught TypeError: Cannot read property 'width' of undefined
    at computePopoverStyle

how to reproduce

• render a stateless Popover (i.e passing the isOpen prop from outside) with isOpen={false} and attachToBody={true}
• update the same instance by passing isOpen={true}

Here's an Example.md entry that reproduces the issue:

initialState = { isOpen: false }

const togglePopover = () => setState(s => ({ ...s, isOpen: !s.isOpen }));

const Item = ({ title, value }) => (
  <FlexView column hAlignContent='center' className='option'>
    <FlexView className='title'>{title}</FlexView>
    <FlexView className='value'>{`$${value}/month`}</FlexView>
    <Button size='medium' label='Choose' onClick={() => {}} />
  </FlexView>
);

const content = (
  <FlexView>
    <Item title='Express' value={9} />
    <Item title='Premium' value={12} />
    <Item title='Enterprise' value={22} />
  </FlexView>
);

const popoverProps = {
  content,
  attachToBody: true,
  auto: true,
  position: 'top',
  anchor: 'center',
  className: 'baloon',
  isOpen: state.isOpen
};

<Popover popover={popoverProps}>
  <FlexView
    hAlignContent='center'
    style={{ width: 150, border: '1px solid #dedede', padding: 10, cursor: 'pointer' }}
    onClick={togglePopover}
  >
    Toggle
  </FlexView>
</Popover>

specs

{optional: describe a possible fix for this bug, if not obvious}

misc

tested on React 16.6 and 16.8