fix: notice bar close and not propagate

damonyoungcc · Mar 2, 2024 · 6adb54b · 6adb54b
1 parent 784eff5
commit 6adb54b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/notice-bar/notice-bar.tsx b/src/components/notice-bar/notice-bar.tsx
@@ -144,7 +144,8 @@ export const NoticeBar = memo<NoticeBarProps>(p => {
           {props.closeable && (
             <div
               className={`${classPrefix}-close`}
-              onClick={() => {
+              onClick={e => {
+                e.stopPropagation()
                 setVisible(false)
                 props.onClose?.()
               }}

diff --git a/src/components/notice-bar/tests/notice-bar.test.tsx b/src/components/notice-bar/tests/notice-bar.test.tsx
@@ -23,10 +23,17 @@ describe('NoticeBar', () => {
     expect(renderer2.getByTestId('alert')).toHaveClass(`${classPrefix}-alert`)
   })
 
-  test('can be close', async () => {
-    const fn = jest.fn()
+  test('can be close and not propagate', async () => {
+    const onClose = jest.fn()
+    const onClick = jest.fn()
     const { getByTestId } = render(
-      <NoticeBar content='notice' closeable data-testid='notice' onClose={fn} />
+      <NoticeBar
+        content='notice'
+        closeable
+        data-testid='notice'
+        onClose={onClose}
+        onClick={onClick}
+      />
     )
 
     const el = getByTestId('notice')
@@ -35,7 +42,8 @@ describe('NoticeBar', () => {
 
     fireEvent.click(iconEl)
     expect(el).not.toBeInTheDocument()
-    expect(fn).toBeCalled()
+    expect(onClose).toBeCalled()
+    expect(onClick).not.toBeCalled()
   })
 
   test('`icon` prop', async () => {