From 4be8bbeef9360351873f6a23239c3ab6413fa408 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 21:17:30 +0100
Subject: [PATCH 1/3] Close creation menu when expanding space panel via expand
 hierarchy

---
 src/components/views/spaces/SpacePanel.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 411b0f9b5e..163a5cfb0b 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -221,14 +221,20 @@ const SpacePanel = () => {
                             space={s}
                             activeSpaces={activeSpaces}
                             isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => setPanelCollapsed(false)}
+                            onExpand={() => {
+                                closeMenu();
+                                setPanelCollapsed(false);
+                            }}
                         />) }
                         { spaces.map(s => <SpaceItem
                             key={s.roomId}
                             space={s}
                             activeSpaces={activeSpaces}
                             isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => setPanelCollapsed(false)}
+                            onExpand={() => {
+                                closeMenu();
+                                setPanelCollapsed(false);
+                            }}
                         />) }
                     </div>
                     <SpaceButton

From 818dfc91eca882030290da5c378fec1dc9367ff9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 May 2021 08:48:21 +0100
Subject: [PATCH 2/3] use useEffect to close menu whenever the space panel
 collapsed state changes

---
 src/components/views/spaces/SpacePanel.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 163a5cfb0b..aac1f609d5 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 
@@ -127,6 +127,10 @@ const SpacePanel = () => {
     const [invites, spaces, activeSpace] = useSpaces();
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
 
+    useEffect(() => {
+        closeMenu();
+    }, [isPanelCollapsed]); // eslint-disable-line react-hooks/exhaustive-deps
+
     const newClasses = classNames("mx_SpaceButton_new", {
         mx_SpaceButton_newCancel: menuDisplayed,
     });
@@ -221,20 +225,14 @@ const SpacePanel = () => {
                             space={s}
                             activeSpaces={activeSpaces}
                             isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => {
-                                closeMenu();
-                                setPanelCollapsed(false);
-                            }}
+                            onExpand={() => setPanelCollapsed(false)}
                         />) }
                         { spaces.map(s => <SpaceItem
                             key={s.roomId}
                             space={s}
                             activeSpaces={activeSpaces}
                             isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => {
-                                closeMenu();
-                                setPanelCollapsed(false);
-                            }}
+                            onExpand={() => setPanelCollapsed(false)}
                         />) }
                     </div>
                     <SpaceButton
@@ -249,10 +247,7 @@ const SpacePanel = () => {
                 </AutoHideScrollbar>
                 <AccessibleTooltipButton
                     className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
-                    onClick={() => {
-                        setPanelCollapsed(!isPanelCollapsed);
-                        if (menuDisplayed) closeMenu();
-                    }}
+                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                     title={expandCollapseButtonTitle}
                 />
                 { contextMenu }

From bd653ac5a89b1a47b7182c73bc5464f835645f07 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 May 2021 09:11:43 +0100
Subject: [PATCH 3/3] fix edge cases around space panel auto collapsing/closing
 menu

---
 src/components/views/spaces/SpacePanel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index aac1f609d5..eb63b21f0e 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -128,7 +128,9 @@ const SpacePanel = () => {
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
 
     useEffect(() => {
-        closeMenu();
+        if (!isPanelCollapsed && menuDisplayed) {
+            closeMenu();
+        }
     }, [isPanelCollapsed]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const newClasses = classNames("mx_SpaceButton_new", {
@@ -239,8 +241,8 @@ const SpacePanel = () => {
                         className={newClasses}
                         tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
                         onClick={menuDisplayed ? closeMenu : () => {
-                            openMenu();
                             if (!isPanelCollapsed) setPanelCollapsed(true);
+                            openMenu();
                         }}
                         isNarrow={isPanelCollapsed}
                     />