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: (