diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss index f93c4517ba..bbeff174d3 100644 --- a/src/components/Drawer/Drawer.scss +++ b/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; } } diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx index 329c450306..2688cb59cc 100644 --- a/src/components/Drawer/Drawer.tsx +++ b/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) => { + (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true; + }; + return ( - {children} +
+ {children} +
); @@ -184,7 +198,11 @@ export const DrawerWrapper = ({ } return ( - + {title} {controls}