diff --git a/packages/co-design-core/src/components/Drawer/Drawer.tsx b/packages/co-design-core/src/components/Drawer/Drawer.tsx index f02841d5..c15bb438 100644 --- a/packages/co-design-core/src/components/Drawer/Drawer.tsx +++ b/packages/co-design-core/src/components/Drawer/Drawer.tsx @@ -148,15 +148,8 @@ export const CoDrawer = ({ }} > {(transitionStyles) => ( - !noCloseOnClickOutside && onClose()} - {...props} - > + event.stopPropagation()} className={cx(classes.drawer, className)} ref={focusTrapRef} style={{ ...transitionStyles.drawer, zIndex: (zIndex in theme.zIndex ? theme.zIndex[zIndex] : zIndex) + 2 }} @@ -186,6 +179,7 @@ export const CoDrawer = ({ opacity={_overlayOpacity} zIndex={zIndex} color={overlayColor || (theme.colorScheme === 'dark' ? theme.palettes.gray[9] : theme.colors.black)} + onMouseDown={() => !noCloseOnClickOutside && onClose()} /> )} diff --git a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx index 7cc4231b..a361c316 100644 --- a/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx +++ b/packages/co-design-core/src/components/Popover/stories/Popover.stories.tsx @@ -4,6 +4,8 @@ import { Center } from '../../Center'; import { Popover } from '../Popover'; import { useToggle } from '@co-design/hooks'; import { Menu } from '../../Menu'; +import { Drawer } from '../../Drawer'; +import { Button } from '../../Button'; export default { title: '@co-design/core/Popover', @@ -151,3 +153,26 @@ export const OpenByChildrenWithFlag = { ); }, }; + +export const InDrawer = { + render: (props) => { + const [opened, toggleOpened] = useToggle(); + + return ( +
+ + { + toggleOpened(false); + }} + > + } {...props}> + + + +
+ ); + }, +};