Layout the popup after initial render.

src/Popup.js

@@ -25,61 +25,80 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-export const Popup = (props) => {
-  const className = ClassName('bthlabs-react-custom-popup', props.className, {
-    'bthlabs-rcp-visible': props.visible
-  });
+export class Popup extends React.Component {
+  constructor (props) {
+    super(props);
 
-  let layout = [0, 0];
-  const body = document.body;
-  const innerStyle = {};
-  if (props.visible && props.anchor && props.anchor.current) {
-    const box = props.anchor.current.getBoundingClientRect();
-    const document_ = document.documentElement;
-
-    const scrollTop = (
-      window.pageYOffset || document_.scrollTop || body.scrollTop
-    );
-    const scrollLeft = (
-      window.pageXOffset || document_.scrollLeft || body.scrollLeft
-    );
-
-    const clientTop = document_.clientTop || body.clientTop || 0;
-    const clientLeft = document_.clientLeft || body.clientLeft || 0;
-
-    layout[0] = box.left + scrollLeft - clientLeft;
-    layout[1] = box.top +  scrollTop - clientTop;
+    this.state = {
+      layout: [0, 0]
+    };
   }
-
-  if (props.visible) {
-    if (typeof props.onLayout === 'function') {
-      layout = props.onLayout(layout);
-    }
-
-    innerStyle.left = `${layout[0]}px`;
-    innerStyle.top = `${layout[1]}px`;
-
-    if (layout[2]) {
-      innerStyle.width = `${layout[2]}px`;
-    }
-
-    if (layout[3]) {
-      innerStyle.height = `${layout[3]}px`;
+  componentDidUpdate (prevProps, prevState) {
+    if (prevProps.visible !== this.props.visible && this.props.visible) {
+      this.layout();
     }
   }
+  layout () {
+    let layout = [0, 0];
+    const body = document.body;
+    if (this.props.visible && this.props.anchor && this.props.anchor.current) {
+      const box = this.props.anchor.current.getBoundingClientRect();
+      const document_ = document.documentElement;
 
-  return ReactDOM.createPortal(
-    <div className={className}>
-      {!props.hideOverlay &&
-        <div className="bthlabs-rcp-overlay" onClick={props.onOverlayClick} />
+      const scrollTop = (
+        window.pageYOffset || document_.scrollTop || body.scrollTop
+      );
+      const scrollLeft = (
+        window.pageXOffset || document_.scrollLeft || body.scrollLeft
+      );
+
+      const clientTop = document_.clientTop || body.clientTop || 0;
+      const clientLeft = document_.clientLeft || body.clientLeft || 0;
+
+      layout[0] = box.left + scrollLeft - clientLeft;
+      layout[1] = box.top +  scrollTop - clientTop;
+    }
+
+    if (this.props.visible) {
+      if (typeof this.props.onLayout === 'function') {
+        layout = this.props.onLayout(layout);
       }
-      <div className="bthlabs-rcp-inner" style={innerStyle}>
-        {props.children}
-      </div>
-    </div>,
-    props.domNode || body
-  );
-};
+
+      this.setState({layout: layout});
+    }
+  }
+  render () {
+    const className = ClassName('bthlabs-react-custom-popup', this.props.className, {
+      'bthlabs-rcp-visible': this.props.visible
+    });
+
+    const innerStyle = {};
+    if (this.props.visible) {
+      innerStyle.left = `${this.state.layout[0]}px`;
+      innerStyle.top = `${this.state.layout[1]}px`;
+
+      if (this.state.layout[2]) {
+        innerStyle.width = `${this.state.layout[2]}px`;
+      }
+
+      if (this.state.layout[3]) {
+        innerStyle.height = `${this.state.layout[3]}px`;
+      }
+    }
+
+    return ReactDOM.createPortal(
+      <div className={className}>
+        {!this.props.hideOverlay &&
+          <div className="bthlabs-rcp-overlay" onClick={this.props.onOverlayClick} />
+        }
+        <div className="bthlabs-rcp-inner" style={innerStyle}>
+          {this.props.children}
+        </div>
+      </div>,
+      this.props.domNode || document.body
+    );
+  }
+}
 
 Popup.propTypes = {
   anchor: PropTypes.object,