fix(time-picker): blur event not trigger (#1505)

* fix(time-picker): blur event not trigger * rebase * feat(time-picker): add test Co-authored-by: Jiwen Bai <[email protected]>
tusen-ai · Nov 8, 2021 · f2c3249 · f2c3249
1 parent 68e903e
commit f2c3249
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -21,6 +21,7 @@
 ### Fixes
 
 - Fix `n-alert` `contentTextColor` and `titleTextColor` type theme variable not working, closes [#1495](https://github.com/TuSimple/naive-ui/issues/1495).
+- Fix `n-time-picker` not trigger blur event when the panel is closed by ok button, closes [#1499](https://github.com/TuSimple/naive-ui/issues/1499).
 - Fix `n-upload` `UploadFileInfo`'s `thumbnailUrl` field not working, closes [#1495](https://github.com/TuSimple/naive-ui/issues/1245).
 - Fix `n-button` `keyboard` prop does not work, closes [#1508](https://github.com/TuSimple/naive-ui/issues/1508).
 - Fix `n-upload` instance misses `openOpenFileDialog` method.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -21,6 +21,7 @@
 ### Fixes
 
 - 修复 `n-alert` `contentTextColor` 和 `titleTextColor` 的类型主题变量不起作用，关闭 [#1495](https://github.com/TuSimple/naive-ui/issues/1495)
+- 修复 `n-time-picker` 当选择面板通过确认按钮关闭时不会触发 blur 事件, closes [#1499](https://github.com/TuSimple/naive-ui/issues/1499)
 - 修复 `n-upload` `UploadFileInfo` 的 `thumbnailUrl` 字段不起作用，关闭 [#1495](https://github.com/TuSimple/naive-ui/issues/1245)
 - 修复 `n-button` `keyboard` 属性不起作用，关闭 [#1508](https://github.com/TuSimple/naive-ui/issues/1508)
 - 修复 `n-upload` 实例缺少 `openOpenFileDialog` 方法

diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
@@ -413,6 +413,8 @@ export default defineComponent({
             returnFocus: false
           })
         }
+      } else {
+        doBlur(e)
       }
     }
 

diff --git a/src/time-picker/tests/TimePicker.spec.ts b/src/time-picker/tests/TimePicker.spec.ts
@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils'
+import { h } from 'vue'
 import { NTimePicker } from '../index'
+import { NInput } from '../../input'
 
 describe('n-time-picker', () => {
   it('should work with import on demand', () => {
@@ -95,6 +97,37 @@ describe('n-time-picker', () => {
     expect(onBlur).toHaveBeenCalled()
     wrapper.unmount()
   })
+  it('should work with `on-blur` prop when use `ok` button', async () => {
+    const onBlur = jest.fn()
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const Render = () => {
+      return h('div', null, [
+        h(NTimePicker, {
+          onBlur,
+          actions: ['confirm']
+        }),
+        h(NInput, {
+          inputProps: {
+            id: 'input'
+          }
+        })
+      ])
+    }
+    const wrapper = mount(Render, {
+      attachTo: document.body
+    })
+    await wrapper.find('input').trigger('click')
+    const button: HTMLElement = document.querySelector(
+      '.n-button'
+    ) as HTMLElement
+    button.click()
+
+    const input = document.querySelector('#input') as HTMLElement
+    input.focus()
+
+    expect(onBlur).toHaveBeenCalled()
+    wrapper.unmount()
+  })
 
   it('should work with `on-focus` prop', async () => {
     const onFocus = jest.fn()
-Original file line number
+Diff line change
@@ Expand Up / @@ -413,6 +413,8 @@ export default defineComponent({ @@
                 returnFocus: false
               })
             }
+          } else {
+            doBlur(e)
           }
         }
@@ Expand Down @@