Drawer 안에서 이벤트 전파 막히는 것 수정했다

cobaltinc · Oct 18, 2023 · 322ba68 · 322ba68
1 parent 1c6cdde
commit 322ba68
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git 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) => (
-        <View
-          className={cx(classes.root, { [classes.noOverlay]: noOverlay }, className)}
-          role="dialog"
-          aria-modal
-          onMouseDown={() => !noCloseOnClickOutside && onClose()}
-          {...props}
-        >
+        <View className={cx(classes.root, { [classes.noOverlay]: noOverlay }, className)} role="dialog" aria-modal {...props}>
           <Paper
-            onMouseDown={(event) => 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()}
               />
             </div>
           )}

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
@@ -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 (
+      <div>
+        <Button onClick={toggleOpened}>Open</Button>
+        <Drawer
+          zIndex={2998}
+          opened={opened}
+          onClose={() => {
+            toggleOpened(false);
+          }}
+        >
+          <Popover zIndex={3001} placement="bottom" content={<Content />} {...props}>
+            <button>Popover</button>
+          </Popover>
+        </Drawer>
+      </div>
+    );
+  },
+};