From 98870bf2968fa35685442bb236747d49857084e7 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 21 Aug 2019 15:20:28 +0300
Subject: [PATCH] menuMatchLabelWidth prop added to Popup

---
 src/common/Popup/Popup.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index 17a6b251c..87a84705c 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
-const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
+const Popup = ({ open = false, menuMatchLabelWidth = false, renderLabel, renderMenu, onCloseRequest }) => {
     const labelRef = React.useRef(null);
     const menuRef = React.useRef(null);
     React.useEffect(() => {
@@ -28,6 +28,8 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
             return;
         }
 
+        menuRef.current.removeAttribute('style');
+
         const documentRect = document.documentElement.getBoundingClientRect();
         const labelRect = labelRef.current.getBoundingClientRect();
         const menuRect = menuRef.current.getBoundingClientRect();
@@ -82,8 +84,13 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
             menuRef.current.style.maxWidth = leftMenuStyles.maxWidth;
         }
 
+        if (menuMatchLabelWidth) {
+            menuRef.current.style.width = `${labelRect.width}px`;
+            menuRef.current.style.maxWidth = `${labelRect.width}px`;
+        }
+
         menuRef.current.style.visibility = 'visible';
-    }, [open]);
+    }, [open, menuMatchLabelWidth]);
     return (
         <React.Fragment>
             {renderLabel(labelRef)}
@@ -103,6 +110,7 @@ const Popup = ({ open = false, renderLabel, renderMenu, onCloseRequest }) => {
 
 Popup.propTypes = {
     open: PropTypes.bool,
+    menuMatchLabelWidth: PropTypes.bool,
     renderLabel: PropTypes.func.isRequired,
     renderMenu: PropTypes.func.isRequired,
     onCloseRequest: PropTypes.func.isRequired