From dc1f60025134a002fe63b9b07a9d2dd1dcc6955d Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 23 Apr 2019 13:59:42 +0300
Subject: [PATCH] React tree of Popup component improved

---
 src/common/Popup/Menu.js  |  7 +------
 src/common/Popup/Popup.js | 14 ++++++++------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/common/Popup/Menu.js b/src/common/Popup/Menu.js
index 96fefccb6..01317d24d 100644
--- a/src/common/Popup/Menu.js
+++ b/src/common/Popup/Menu.js
@@ -1,11 +1,6 @@
-const React = require('react');
 const PropTypes = require('prop-types');
 
-const Menu = React.forwardRef(({ children }, ref) => (
-    <div ref={ref}>
-        {children}
-    </div>
-));
+const Menu = ({ children }) => children;
 
 Menu.displayName = 'Popup.Menu';
 
diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index 2ef6ffcc4..4230eb72c 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -228,21 +228,23 @@ class Popup extends React.Component {
         this.close();
     }
 
-    renderLabel(children) {
-        return React.cloneElement(children, { ref: this.labelRef, onClick: this.labelOnClick });
+    renderLabel(labelElement) {
+        return React.cloneElement(labelElement, { ref: this.labelRef, onClick: this.labelOnClick });
     }
 
-    renderMenu(children) {
+    renderMenu(menuElement) {
         if (!this.state.open) {
-            return null;
+            return React.cloneElement(menuElement, {}, null);
         }
 
-        return (
+        return React.cloneElement(menuElement, {},
             <Modal>
                 <div className={classnames(styles['modal-container'], this.props.modalContainerClassName)} onClick={this.modalBackgroundOnClick}>
                     <div ref={this.menuContainerRef} className={styles['menu-container']} onClick={this.menuContainerOnClick}>
                         <div ref={this.menuScrollRef} className={styles['menu-scroll-container']}>
-                            {React.cloneElement(children, { ref: this.menuChildrenRef })}
+                            <div ref={this.menuChildrenRef}>
+                                {menuElement.props.children}
+                            </div>
                         </div>
                         <div ref={this.menuBorderTopRef} className={classnames(styles['border'], styles['border-top'])} />
                         <div ref={this.menuBorderRightRef} className={classnames(styles['border'], styles['border-right'])} />