feat: show the popup on focus and close it on blur

README.md

@@ -160,6 +160,8 @@ custom time-picker
 | input-error     | When user type a invalid Date                          | the input text         |
 | panel-change    | When change the panel view(eg: from year to month view)| [panel](#panel), [oldPanel](#panel) |
 | calendar-change | When calendar view year or month change                | now(Date), oldNow(Date)|
+| focus           | When input focus                                       |                        |
+| blur            | When input blur                                        |                        |
 
 #### panel
 

README.zh-CN.md

@@ -159,6 +159,8 @@ export default {
 | input-error     | 当用户输入的值无效时候触发       | 用户输入的字符串         
 | panel-change    | 切换面板时触发                 | [panel](#panel), [oldPanel](#panel)      
 | calendar-change | 日历的年或月改变时触发           | 当前日历时间，过去日历时间
+| focus           | 当输入框获得焦点                |
+| blur            | 当输入框失去焦点                |
 
 #### panel
 

src/index.vue

@@ -22,6 +22,9 @@
         :readonly="!editable"
         :value="text"
         :placeholder="innerPlaceholder"
+        @keydown="handleKeydown"
+        @focus="handleFocus"
+        @blur="handleBlur"
         @input="handleInput"
         @change="handleChange">
       <span class="mx-input-append">
@@ -222,6 +225,7 @@ export default {
         this.initCalendar()
       } else {
         this.userInput = null
+        this.blur()
       }
     }
   },
@@ -515,11 +519,31 @@ export default {
         this.position = position
       }
     },
+    blur () {
+      this.$refs.input.blur()
+    },
+    handleBlur (event) {
+      this.$emit('blur', event)
+    },
+    handleFocus (event) {
+      if (!this.popupVisible) {
+        this.popupVisible = true
+      }
+      this.$emit('focus', event)
+    },
+    handleKeydown (event) {
+      const keyCode = event.keyCode
+      // Tab 9 or Enter 13
+      if (keyCode === 9 || keyCode === 13) {
+        this.popupVisible = false
+        event.stopPropagation()
+      }
+    },
     handleInput (event) {
       this.userInput = event.target.value
     },
-    handleChange (event) {
-      const value = event.target.value
+    handleChange () {
+      const value = this.text
       if (this.editable && this.userInput !== null) {
         const checkDate = this.$refs.calendarPanel.isDisabledTime
         if (!value) {

test/index.spec.js

@@ -14,6 +14,28 @@ afterEach(() => {
 })
 
 describe('datepicker', () => {
+  it('popup open when input focus', () => {
+    wrapper = mount(DatePicker)
+    const vm = wrapper.vm
+    wrapper.find('input').trigger('focus')
+    expect(vm.popupVisible).toBe(true)
+    expect(wrapper.emitted().focus).toBeTruthy()
+  })
+
+  it('popup close when type tab or enter', () => {
+    wrapper = mount(DatePicker)
+    const vm = wrapper.vm
+    const input = wrapper.find('input')
+    input.trigger('focus')
+    input.trigger('keydown', { keyCode: 9 })
+    expect(vm.popupVisible).toBe(false)
+    input.trigger('focus')
+    input.trigger('keydown', { keyCode: 13 })
+    expect(vm.popupVisible).toBe(false)
+    input.trigger('blur')
+    expect(wrapper.emitted().blur).toBeTruthy()
+  })
+
   it('prop: valueType', () => {
     wrapper = mount(DatePicker, {
       propsData: {
@@ -160,9 +182,9 @@ describe('datepicker', () => {
     wrapper.setData({ popupVisible: true })
     vm.selectDate(new Date(2018, 5, 5))
     expect(vm.popupVisible).toBe(true)
-    expect(wrapper.emittedByOrder()).toHaveLength(0)
+    expect(wrapper.emitted().input).toBeUndefined()
     btn.trigger('click')
-    expect(wrapper.emittedByOrder()).toHaveLength(3)
+    expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5))
     expect(vm.popupVisible).toBe(false)
   })