Fix iOS date range picker double click bug

Author: chrisdavies

dist/date-range-picker.js

@@ -1025,7 +1025,7 @@
     dp.close = noop;
     dp.destroy = noop;
     dp.updateInput = noop;
-    dp.shouldFocusOnRender = false;
+    dp.shouldFocusOnRender = opts.shouldFocusOnRender;
 
     dp.computeSelectedDate = function () {
       return opts.hilightedDate;
@@ -1305,17 +1305,20 @@
       end.setState({});
     }
 
-    root.addEventListener('mouseover', function mouseOverDate(e) {
-      if (e.target.classList.contains('dp-day')) {
-        var dt = new Date(parseInt(e.target.dataset.date));
-        var changed = !datesEq(dt, hoverDate);
-
-        if (changed) {
-          hoverDate = dt;
-          rerender();
+    // Hack to avoid a situation where iOS requires double-clicking to select
+    if (!/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+      root.addEventListener('mouseover', function mouseOverDate(e) {
+        if (e.target.classList.contains('dp-day')) {
+          var dt = new Date(parseInt(e.target.dataset.date));
+          var changed = !datesEq(dt, hoverDate);
+    
+          if (changed) {
+            hoverDate = dt;
+            rerender();
+          }
         }
-      }
-    });
+      });
+    }
 
     function dateClass(dt) {
       var rangeClass = (state.end || hoverDate) &&

dist/tiny-date-picker.js

@@ -1025,7 +1025,7 @@
     dp.close = noop;
     dp.destroy = noop;
     dp.updateInput = noop;
-    dp.shouldFocusOnRender = false;
+    dp.shouldFocusOnRender = opts.shouldFocusOnRender;
 
     dp.computeSelectedDate = function () {
       return opts.hilightedDate;

src/date-range-picker.js

@@ -112,17 +112,20 @@ export function DateRangePicker(container, opts) {
     end.setState({});
   }
 
-  root.addEventListener('mouseover', function mouseOverDate(e) {
-    if (e.target.classList.contains('dp-day')) {
-      var dt = new Date(parseInt(e.target.dataset.date));
-      var changed = !datesEq(dt, hoverDate);
-
-      if (changed) {
-        hoverDate = dt;
-        rerender();
+  // Hack to avoid a situation where iOS requires double-clicking to select
+  if (!/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+    root.addEventListener('mouseover', function mouseOverDate(e) {
+      if (e.target.classList.contains('dp-day')) {
+        var dt = new Date(parseInt(e.target.dataset.date));
+        var changed = !datesEq(dt, hoverDate);
+  
+        if (changed) {
+          hoverDate = dt;
+          rerender();
+        }
       }
-    }
-  });
+    });
+  }
 
   function dateClass(dt) {
     var rangeClass = (state.end || hoverDate) &&

src/mode/permanent-mode.js

@@ -10,7 +10,7 @@ export default function PermanentMode(root, emit, opts) {
   dp.close = noop;
   dp.destroy = noop;
   dp.updateInput = noop;
-  dp.shouldFocusOnRender = false;
+  dp.shouldFocusOnRender = opts.shouldFocusOnRender;
 
   dp.computeSelectedDate = function () {
     return opts.hilightedDate;