fix: emulate click in touch devices

Fixes #197

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+# next
+
+- Emulate click in touch devices to support hiding the picker automatically (#197).
+
 ## 1.0.4 (Jan 6, 2019)
 
 - Fix wrong future month selection when today is 31 (#195).

src/js/constants.js

@@ -1,4 +1,6 @@
-export const WINDOW = typeof window !== 'undefined' ? window : {};
+export const IS_BROWSER = typeof window !== 'undefined';
+export const WINDOW = IS_BROWSER ? window : {};
+export const IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
 export const NAMESPACE = 'datepicker';
 export const EVENT_CLICK = `click.${NAMESPACE}`;
 export const EVENT_FOCUS = `focus.${NAMESPACE}`;
@@ -8,6 +10,7 @@ export const EVENT_PICK = `pick.${NAMESPACE}`;
 export const EVENT_RESIZE = `resize.${NAMESPACE}`;
 export const EVENT_SCROLL = `scroll.${NAMESPACE}`;
 export const EVENT_SHOW = `show.${NAMESPACE}`;
+export const EVENT_TOUCH_START = `touchstart.${NAMESPACE}`;
 export const CLASS_HIDE = `${NAMESPACE}-hide`;
 export const LANGUAGES = {};
 export const VIEWS = {

src/js/datepicker.js

@@ -11,6 +11,8 @@ import {
   EVENT_KEYUP,
   EVENT_PICK,
   EVENT_SHOW,
+  EVENT_TOUCH_START,
+  IS_TOUCH_DEVICE,
   LANGUAGES,
   NAMESPACE,
   VIEWS,
@@ -191,6 +193,10 @@ class Datepicker {
       } else {
         $this.on(EVENT_CLICK, $.proxy(this.show, this));
       }
+
+      if (IS_TOUCH_DEVICE) {
+        $(document).on(EVENT_TOUCH_START, $.proxy(this.touchstart, this));
+      }
     }
   }
 
@@ -221,6 +227,10 @@ class Datepicker {
       } else {
         $this.off(EVENT_CLICK, this.show);
       }
+
+      if (IS_TOUCH_DEVICE) {
+        $(document).off(EVENT_TOUCH_START, this.touchstart);
+      }
     }
   }
 

src/js/handlers.js

@@ -204,4 +204,12 @@ export default {
       this.hide();
     }
   },
+
+  touchstart({ target }) {
+    // Emulate click in touch devices to support hiding the picker automatically (#197).
+    if (this.isInput && target !== this.element && !$.contains(this.$picker, target)) {
+      this.hide();
+      this.element.blur();
+    }
+  },
 };