From c12c9fb2e4d725ed884e86c1440d29c475a2d7f6 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Mon, 20 Sep 2021 05:40:27 -0400
Subject: [PATCH] [MM-38535] Overlay drag region with clickable area when menu
 is open (#1738)

---
 src/renderer/components/MainPage.tsx   | 1 +
 src/renderer/components/TabBar.tsx     | 6 +++++-
 src/renderer/css/components/TabBar.css | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx
index cbb25748..b81db468 100644
--- a/src/renderer/components/MainPage.tsx
+++ b/src/renderer/components/MainPage.tsx
@@ -330,6 +330,7 @@ export default class MainPage extends React.PureComponent<Props, State> {
                 onCloseTab={this.handleCloseTab}
                 onDrop={this.handleDragAndDrop}
                 tabsDisabled={this.state.modalOpen}
+                isMenuOpen={this.state.isMenuOpen}
             />
         );
 
diff --git a/src/renderer/components/TabBar.tsx b/src/renderer/components/TabBar.tsx
index f26b1c50..8004cf3b 100644
--- a/src/renderer/components/TabBar.tsx
+++ b/src/renderer/components/TabBar.tsx
@@ -24,6 +24,7 @@ type Props = {
     mentionCounts: Record<string, number>;
     onDrop: (result: DropResult) => void;
     tabsDisabled?: boolean;
+    isMenuOpen?: boolean;
 };
 
 function getStyle(style?: DraggingStyle | NotDraggingStyle) {
@@ -151,12 +152,15 @@ export default class TabBar extends React.PureComponent<Props> {
                     {(provided) => (
                         <Nav
                             ref={provided.innerRef}
-                            className={`TabBar${this.props.isDarkMode ? ' darkMode' : ''}`}
+                            className={classNames('TabBar', {
+                                darkMode: this.props.isDarkMode,
+                            })}
                             id={this.props.id}
                             variant='tabs'
                             {...provided.droppableProps}
                         >
                             {tabs}
+                            {this.props.isMenuOpen ? <span className='TabBar-nonDrag'/> : null}
                             {provided.placeholder}
                         </Nav>
                     )}
diff --git a/src/renderer/css/components/TabBar.css b/src/renderer/css/components/TabBar.css
index 33e7c4b1..b5abe38f 100644
--- a/src/renderer/css/components/TabBar.css
+++ b/src/renderer/css/components/TabBar.css
@@ -9,6 +9,11 @@
   padding: 6px 8px;
 }
 
+.TabBar-nonDrag {
+  flex-grow: 1;
+  -webkit-app-region: no-drag;
+}
+
 .TabBar .teamTabItem span {
   flex: 0 1 auto;
   overflow: hidden;