Async Popup doesn't update position and alignment

[joheredi]

Bug Report

When Popup content is loaded asynchronously and it needs to expand, Popup grows in a direction that no longer honors position and alignment

Steps

import React from 'react'
import { Button, Popup, Segment } from '@stardust-ui/react'

const Component = () => <Segment styles={{minHeight: "300px"}}>Hello World</Segment>

const PopupExample = () => <Popup position="above" align="top" trigger={<Button icon="expand" />} content={{content: <AsyncData data={<Component />} />}} />

const render = data => {
  return !data ? "...loading" : data;
}

class AsyncData extends React.Component<{ render: Function; data?: any }> {
  state = { loading: true }

  componentDidMount() {
    setTimeout(() => { 
      console.log("TimedOut")
      this.setState({loading: false})
      
    }, 1000 )
  }

  public render() {
    const { loading } = this.state
    const { data } = this.props
    return loading ? "loading" : data
  }
} 

export default PopupExample

Expected Result

After content is loaded and Popup resized, it should maintain its position and alignment

Actual Result

Doesn't maintain position and alignment

Version

0.15.0

[johannao76]

This is a big problem for @mentions and emojis as for these the popup needs to dynamically change height and the popup needs to stay anchored at its original location.

[johannao76]

This issue is still happening in the latest build.

[layershifter]

Did you tried solution from #705?