fix(Drawer): handle clicks in components inside Drawer (#2264)

Author: Raubzeug

src/components/Drawer/Drawer.scss

@@ -23,7 +23,7 @@
         top: 0;
         left: 0;
 
-        padding: var(--g-spacing-4) var(--g-spacing-4) 0 var(--g-spacing-6);
+        padding: var(--g-spacing-4) var(--g-spacing-4) 0 var(--g-spacing-4);
 
         background-color: var(--g-color-base-background);
     }
@@ -34,5 +34,10 @@
         flex-direction: column;
 
         height: 100%;
+        //split-pane resizer size
+        margin-left: var(--g-spacing-2);
+    }
+    &__click-handler {
+        display: contents;
     }
 }

src/components/Drawer/Drawer.tsx

@@ -17,6 +17,10 @@ const b = cn('ydb-drawer');
 
 import './Drawer.scss';
 
+type DrawerEvent = MouseEvent & {
+    _capturedInsideDrawer?: boolean;
+};
+
 interface DrawerPaneContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
@@ -64,7 +68,11 @@ const DrawerPaneContentWrapper = ({
             return undefined;
         }
 
-        const handleClickOutside = (event: MouseEvent) => {
+        const handleClickOutside = (event: DrawerEvent) => {
+            //skip if event is captured inside drawer or not triggered by user
+            if (event._capturedInsideDrawer || !event.isTrusted) {
+                return;
+            }
             if (
                 isVisible &&
                 drawerRef.current &&
@@ -91,6 +99,10 @@ const DrawerPaneContentWrapper = ({
         }
     };
 
+    const handleClickInsideDrawer = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true;
+    };
+
     return (
         <GravityDrawer
             onEscape={onClose}
@@ -109,7 +121,9 @@ const DrawerPaneContentWrapper = ({
                 className={b('item')}
                 ref={detectClickOutside ? drawerRef : undefined}
             >
-                {children}
+                <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
+                    {children}
+                </div>
             </DrawerItem>
         </GravityDrawer>
     );
@@ -184,7 +198,11 @@ export const DrawerWrapper = ({
         }
 
         return (
-            <Flex justifyContent="space-between" className={b('header-wrapper', headerClassName)}>
+            <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                className={b('header-wrapper', headerClassName)}
+            >
                 <Text variant="subheader-2">{title}</Text>
                 <Flex className={b('controls')}>{controls}</Flex>
             </Flex>