From 072063fbab008a1d9c0081b5418a385b40de3623 Mon Sep 17 00:00:00 2001
From: Mario Juarez <mario@mjp.one>
Date: Thu, 18 Jan 2018 23:26:16 +0100
Subject: [PATCH] Close popup on press ESC key

---
 README.md                        |  1 -
 src/DatetimePopup.vue            | 13 +++++++++++++
 test/specs/DatetimePopup.spec.js | 26 ++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 92011c4..43b24c6 100644
--- a/README.md
+++ b/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
diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue
index 6ea16bc..b66dfb1 100644
--- a/src/DatetimePopup.vue
+++ b/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()
+      }
     }
   }
 }
diff --git a/test/specs/DatetimePopup.spec.js b/test/specs/DatetimePopup.spec.js
index f2a0dc4..e15472f 100644
--- a/test/specs/DatetimePopup.spec.js
+++ b/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 () {