From cc41a963cd8df85e7d62e074b4abbb4c4bcbd769 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 22 Jan 2019 12:57:10 +0100
Subject: [PATCH] set minHeight to fix rendering of devicemenu for unitialized
 device

---
 .../components/DeviceMenu/index.js            |  9 ++++-
 .../Wallet/components/LeftNavigation/index.js | 40 +++++++++++++------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
index cb4f36d9..4797b422 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@@ -54,6 +54,7 @@ class DeviceMenu extends PureComponent<Props> {
         super(props);
         this.mouseDownHandler = this.mouseDownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
+        this.myRef = React.createRef();
     }
 
     componentDidMount(): void {
@@ -85,6 +86,10 @@ class DeviceMenu extends PureComponent<Props> {
         }
     }
 
+    getMenuHeight(): number {
+        return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0;
+    }
+
     blurHandler(): void {
         this.props.toggleDeviceDropdown(false);
     }
@@ -118,13 +123,15 @@ class DeviceMenu extends PureComponent<Props> {
         return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice);
     }
 
+    myRef: { current: ?HTMLDivElement }
+
     render() {
         const { devices, onSelectDevice, forgetDevice } = this.props;
         const { transport } = this.props.connect;
         const { selectedDevice } = this.props.wallet;
 
         return (
-            <Wrapper>
+            <Wrapper ref={this.myRef}>
                 {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
                 {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
                 <DeviceList
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index 5b4801ce..0553b620 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -56,6 +56,7 @@ const Footer = styled.div.attrs(props => ({
 
 const Body = styled.div`
     width: 320px;
+    min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')};
 `;
 
 const Help = styled.div`
@@ -109,45 +110,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGro
 
 type State = {
     animationType: ?string;
-    shouldRenderDeviceSelection: boolean;
     clicked: boolean;
+    bodyMinHeight: number;
 }
 
 class LeftNavigation extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
+        this.deviceMenuRef = React.createRef();
         const { location } = this.props.router;
         const hasNetwork = location && location.state && location.state.network;
         this.state = {
             animationType: hasNetwork ? 'slide-left' : null,
-            shouldRenderDeviceSelection: false,
             clicked: false,
+            bodyMinHeight: 0,
         };
     }
 
+    componentDidMount() {
+        this.recalculateBodyMinHeight();
+    }
+
     componentWillReceiveProps(nextProps: Props) {
-        const { dropdownOpened, selectedDevice } = nextProps.wallet;
+        const { selectedDevice } = nextProps.wallet;
         const { location } = nextProps.router;
         const hasNetwork = location && location.state.network;
         const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal';
-        if (dropdownOpened) {
-            this.setState({ shouldRenderDeviceSelection: true });
-        } else {
-            this.setState({ shouldRenderDeviceSelection: false });
-        }
+
         if (hasNetwork) {
             this.setState({
-                // shouldRenderDeviceSelection: false,
                 animationType: 'slide-left',
             });
         } else {
             this.setState({
-                // shouldRenderDeviceSelection: false,
                 animationType: deviceReady ? 'slide-right' : null,
             });
         }
     }
 
+    componentDidUpdate() {
+        this.recalculateBodyMinHeight();
+    }
+
     shouldRenderAccounts() {
         const { selectedDevice } = this.props.wallet;
         const { location } = this.props.router;
@@ -167,6 +171,16 @@ class LeftNavigation extends React.PureComponent<Props, State> {
         return this.state.animationType !== 'slide-left';
     }
 
+    recalculateBodyMinHeight() {
+        if (this.deviceMenuRef.current) {
+            this.setState({
+                bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
+            });
+        }
+    }
+
+    deviceMenuRef: { current: any };
+
     render() {
         const { props } = this;
         let menu;
@@ -184,7 +198,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
             );
         }
 
-        const { selectedDevice } = props.wallet;
+        const { selectedDevice, dropdownOpened } = props.wallet;
         const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
         return (
             <StickyContainer
@@ -219,8 +233,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                     )}
                     {...this.props}
                 />
-                <Body>
-                    {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
+                <Body minHeight={this.state.bodyMinHeight}>
+                    {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
                     {isDeviceAccessible && menu}
                 </Body>
                 <Footer key="sticky-footer">