Close popup on press ESC key

README.md

@@ -30,7 +30,6 @@ Old features not yet implemented:
 
 New features:
 
-- Close on press `ESC` key
 - Auto-detect the first day of week
 
 ## Installation

src/DatetimePopup.vue

@@ -100,6 +100,14 @@ export default {
     }
   },
 
+  created () {
+    document.addEventListener('keyup', this.onKeyup)
+  },
+
+  beforeDestroy () {
+    document.removeEventListener('keyup', this.onKeyup)
+  },
+
   computed: {
     year () {
       return this.newDatetime.year
@@ -181,6 +189,11 @@ export default {
       }
 
       this.timeTouched = true
+    },
+    onKeyup (event) {
+      if (event.keyCode === 27) {
+        this.cancel()
+      }
     }
   }
 }

test/specs/DatetimePopup.spec.js

@@ -332,6 +332,32 @@ describe('DatetimePopup.vue', function () {
       vm.$('.vdatetime-popup__actions__button--cancel').click()
       expect(vm.spy).to.have.been.calledOnce
     })
+
+    it('should emit cancel event on key up ESC', function (done) {
+      const vm = createVM(this,
+        `<DatetimePopup :datetime="datetime" @cancel="spy"></DatetimePopup>`,
+        {
+          components: { DatetimePopup },
+          data () {
+            return {
+              datetime: LuxonDatetime.local(),
+              spy: sinon.spy()
+            }
+          }
+        })
+
+      expect(vm.spy).to.have.not.been.called
+
+      const event = document.createEvent('Event')
+      event.keyCode = 27
+      event.initEvent('keyup')
+      document.dispatchEvent(event)
+
+      vm.$nextTick(() => {
+        expect(vm.spy).to.have.been.calledOnce
+        done()
+      })
+    })
   })
 
   describe('auto', function () {