Close the picker on click outside #128

Author: joews

lib/js/__tests__/index-test.js

@@ -33,14 +33,25 @@ test("closing the picker removes elements from the dom", async () => {
   expect($backdrop).toBeNull();
 });
 
-test.only("the picker closes when the escape key is pressed", async () => {
+test("the picker closes when the escape key is pressed", async () => {
   const picker = await openPicker();
 
   const event = new window.KeyboardEvent('keydown', { which: 27, keyCode: 27 });
   window.dispatchEvent(event);
 
   await delay(300);
-  const $picker = $(".c-datepicker")
+  const $picker = $(".c-datepicker");
+  expect($picker).toBeNull();
+});
+
+test("the picker closes when the scrim element is clicked", async () => {
+  const picker = await openPicker();
+
+  const event = new MouseEvent('click');
+  $(".c-scrim").dispatchEvent(event);
+
+  await delay(300);
+  const $picker = $(".c-datepicker");
   expect($picker).toBeNull();
 });
 

lib/js/index.js

@@ -183,6 +183,8 @@ class DateTimePicker extends Events {
     this.$('.js-show-clock')
       .addEventListener('click', e => this.clickShowClock(e), false);
 
+    this.scrimEl.addEventListener('click', () => this.close(), false);
+
     return this;
   }