From 740e2f24bc2cb7776d4e0a61a666265789955d91 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 22 May 2019 12:54:15 +0300 Subject: [PATCH 1/2] Menu needs to wait mounting to calculate dimensions reliably --- src/components/Menu/Menu.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 26ff2790..eb255f2b 100644 --- a/src/components/Menu/Menu.js +++ b/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 (
Date: Wed, 22 May 2019 12:57:06 +0300 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6eedbdee..fce9a42a 100644 --- a/CHANGELOG.md +++ b/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.