feat(components): [time-picker] add open and close handlers (#9572)

* feat(components): [time-picker] add handleOpen and handleClose methods * chore: update time-picker docs * chore: update time-picker docs * feat(components): [time-picker] add handleOpen and handleClose methods * fix: revert changes in pnpm-lock.yaml * fix: update the handlers description in the docs Co-authored-by: João Gonçalves <jandretgoncalves@gmail.com>
element-plus · Sep 1, 2022 · 8156606 · 8156606
1 parent 718c23c
commit 8156606
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md
@@ -76,7 +76,9 @@ time-picker/range
 
 ## Methods
 
-| Method | Description               | Parameters |
-| ------ | ------------------------- | ---------- |
-| focus  | focus the Input component | —          |
-| blur   | blur the Input component  | —          |
+| Method      | Description                 | Parameters |
+| ----------- | --------------------------- | ---------- |
+| focus       | focus the Input component   | —          |
+| blur        | blur the Input component    | —          |
+| handleOpen  | open the TimePicker popper  | —          |
+| handleClose | close the TimePicker popper | —          |
diff --git a/packages/components/time-picker/__tests__/time-picker.test.tsx b/packages/components/time-picker/__tests__/time-picker.test.tsx
@@ -347,6 +347,40 @@ describe('TimePicker', () => {
     expect(attr).toEqual('false')
   })
 
+  it('ref handleOpen', async () => {
+    const value = ref(new Date(2016, 9, 10, 18, 40))
+    const wrapper = mount(() => <TimePicker v-model={value.value} />)
+    const timePickerExposed = wrapper.findComponent(TimePicker).vm.$.exposed
+
+    await nextTick()
+    timePickerExposed.handleOpen()
+
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+  })
+
+  it('ref handleClose', async () => {
+    vi.useFakeTimers()
+
+    const value = ref(new Date(2016, 9, 10, 18, 40))
+    const wrapper = mount(() => <TimePicker v-model={value.value} />)
+    const timePickerExposed = wrapper.findComponent(TimePicker).vm.$.exposed
+
+    await nextTick()
+    timePickerExposed.handleOpen()
+    await nextTick()
+    timePickerExposed.handleClose()
+
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('true')
+
+    vi.useRealTimers()
+  })
+
   it('model value should sync when disabled-hours was updated', async () => {
     const value = ref('2000-01-01 00:00:00')
     const minHour = ref('8')

diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
@@ -338,6 +338,14 @@ const onHide = () => {
   emit('visible-change', false)
 }
 
+const handleOpen = () => {
+  pickerVisible.value = true
+}
+
+const handleClose = () => {
+  pickerVisible.value = false
+}
+
 const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
   ignoreFocusEvent = isIgnoreFocusEvent
   const [leftInput, rightInput] = unref(refInput)
@@ -732,6 +740,14 @@ defineExpose({
    * @description emit blur event
    */
   handleBlurInput,
+  /**
+   * @description opens picker
+   */
+  handleOpen,
+  /**
+   * @description closes picker
+   */
+  handleClose,
   /**
    * @description pick item manually
    */

diff --git a/packages/components/time-picker/src/time-picker.tsx b/packages/components/time-picker/src/time-picker.tsx
@@ -40,6 +40,18 @@ export default defineComponent({
       blur: (e: FocusEvent | undefined) => {
         commonPicker.value?.handleBlurInput(e)
       },
+      /**
+       * @description opens the picker element
+       */
+      handleOpen: () => {
+        commonPicker.value?.handleOpen()
+      },
+      /**
+       * @description closes the picker element
+       */
+      handleClose: () => {
+        commonPicker.value?.handleClose()
+      },
     })
 
     return () => {