From f3cb9de5c9153bb59fe26535d08ef8974c4caad6 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@fb.com>
Date: Wed, 20 Jul 2022 06:01:10 -0700
Subject: [PATCH] Fix Sidebar resizing handler propagation

Summary: SidebarInteractiveContainer sets mousedown/mouseup handlers. Whenever user tries to select text in child element those are triggered.

Reviewed By: passy

Differential Revision: D37994014

fbshipit-source-id: 5dcf5642b3a92ec50008aa4aad6b9522a09c1527
---
 desktop/flipper-plugin/src/ui/Sidebar.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/Sidebar.tsx b/desktop/flipper-plugin/src/ui/Sidebar.tsx
index 16b7a4842..a5a18e3ae 100644
--- a/desktop/flipper-plugin/src/ui/Sidebar.tsx
+++ b/desktop/flipper-plugin/src/ui/Sidebar.tsx
@@ -198,9 +198,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         gutterWidth={gutter ? theme.space.large : undefined}>
         <SidebarContainer position={position} unstyled={gutter}>
           {gutter ? (
-            <GutterWrapper position={position}>{children}</GutterWrapper>
+            <GutterWrapper position={position}>
+              {/* Stop propagating mousedown events to prevent SidebarInteractiveContainer from resizing whenever a user starts selecting text in a child */}
+              <Layout.Container onMouseDown={(e) => e.stopPropagation()}>
+                {children}
+              </Layout.Container>
+            </GutterWrapper>
           ) : (
-            children
+            <Layout.Container onMouseDown={(e) => e.stopPropagation()}>
+              {children}
+            </Layout.Container>
           )}
         </SidebarContainer>
       </SidebarInteractiveContainer>