diff --git a/.changeset/sixty-cows-fetch.md b/.changeset/sixty-cows-fetch.md
new file mode 100644
index 0000000000..df7f26aefe
--- /dev/null
+++ b/.changeset/sixty-cows-fetch.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Fixes a bug where onHide is called when clicking inside the overlay, causing the overlay to close.
diff --git a/packages/bezier-react/src/components/Overlay/Overlay.test.tsx b/packages/bezier-react/src/components/Overlay/Overlay.test.tsx
index 83026f87ef..99c7e8ffb0 100644
--- a/packages/bezier-react/src/components/Overlay/Overlay.test.tsx
+++ b/packages/bezier-react/src/components/Overlay/Overlay.test.tsx
@@ -5,6 +5,8 @@ import { getWindow } from 'ssr-window'
import { render } from '~/src/utils/test'
+import { Button } from '~/src/components/Button'
+
import {
CONTAINER_TEST_ID,
ESCAPE_KEY,
@@ -276,12 +278,12 @@ describe('Overlay', () => {
})
describe('Event', () => {
- describe('keydown', () => {
- document.onkeydown = jest.fn()
- const onHide = jest.fn()
+ document.onkeydown = jest.fn()
+ const onHide = jest.fn()
- afterEach(jest.clearAllMocks)
+ afterEach(jest.clearAllMocks)
+ describe('keydown', () => {
it('is Triggered By Escape', () => {
const { getByTestId } = renderRootOverlay({ withTransition: true, onHide })
const overlay = getByTestId(OVERLAY_TEST_ID)
@@ -307,6 +309,21 @@ describe('Overlay', () => {
expect(onHide).toHaveBeenCalledTimes(0)
})
})
+
+ describe('click', () => {
+ it('calls onHide when element outside the overlay is clicked', async () => {
+ renderRootOverlay({ onHide })
+ fireEvent.click(document.body)
+ expect(onHide).toHaveBeenCalled()
+ })
+
+ it('does not call onHide when element inside the overlay is clicked', () => {
+ const { getByRole } = renderRootOverlay({ children: (), onHide })
+ const button = getByRole('button')
+ fireEvent.click(button)
+ expect(onHide).not.toHaveBeenCalled()
+ })
+ })
})
})
})
diff --git a/packages/bezier-react/src/components/Overlay/Overlay.tsx b/packages/bezier-react/src/components/Overlay/Overlay.tsx
index a19d8cd6f9..bb11584ce7 100644
--- a/packages/bezier-react/src/components/Overlay/Overlay.tsx
+++ b/packages/bezier-react/src/components/Overlay/Overlay.tsx
@@ -155,8 +155,8 @@ export const Overlay = forwardRef(function Overlay
event.stopPropagation()
}, [])
- const handleHideOverlay = useCallback((event: any) => {
- if (!event.target?.closest(styles.Overlay)) {
+ const handleHideOverlay = useCallback((event: MouseEvent) => {
+ if (!event.target || (event.target instanceof HTMLElement && !event.target.closest(`.${styles.Overlay}`))) {
onHide?.()
if (!enableClickOutside) {
diff --git a/packages/bezier-react/src/features/SmoothCornersFeature/smoothCornersScript.ts b/packages/bezier-react/src/features/SmoothCornersFeature/smoothCornersScript.ts
index 4feb54b028..d78e63789e 100644
--- a/packages/bezier-react/src/features/SmoothCornersFeature/smoothCornersScript.ts
+++ b/packages/bezier-react/src/features/SmoothCornersFeature/smoothCornersScript.ts
@@ -95,7 +95,6 @@ class SmoothCorners {
.get('--smooth-corners')
.toString()
- console.log("padding: ", padding)
const targetWidth = geom.width - (2 * this.trimPX(padding))
const targetHeight = geom.height - (2 * this.trimPX(padding))