Merge pull request #1096 from sharetribe/fix-too-early-rendering-of-menu

Fix too early rendering of Menu

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] Menu needs to wait for mounting to calculate dimensions properly.
+  [#1096](https://github.com/sharetribe/flex-template-web/pull/1096)
 - [fix] Renamed Component.example.css files to ComponentExample.css to fix bug introduced in one of
   the library updates. [#1095](https://github.com/sharetribe/flex-template-web/pull/1095)
 - [add] `rawOnly` flag for Styleguide examples using fixed positioning or full-page dimensions.

src/components/Menu/Menu.js

@@ -38,7 +38,7 @@ class Menu extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { isOpen: false };
+    this.state = { isOpen: false, ready: false };
 
     const { isOpen, onToggleActive } = props;
     const isIndependentMenu = isOpen === null && onToggleActive === null;
@@ -60,6 +60,10 @@ class Menu extends Component {
     this.menu = null;
     this.menuContent = null;
   }
+  componentDidMount() {
+    // Menu needs to know about DOM before it can calculate it's size proberly.
+    this.setState({ ready: true });
+  }
 
   onBlur(event) {
     // FocusEvent is fired faster than the link elements native click handler
@@ -168,7 +172,7 @@ class Menu extends Component {
     const { className, rootClassName } = this.props;
     const rootClass = rootClassName || css.root;
     const classes = classNames(rootClass, className);
-    const menuChildren = this.prepareChildren();
+    const menuChildren = this.state.ready ? this.prepareChildren() : null;
 
     return (
       <div