replace refocusing input field on click event on picker with preventi…

…ng default of mousedown event in order to prevent input field from flickering and give users a way to extend datepicker by adding their own elements (#78)

Close #85, Close #92

* Merge branch 'dev'

dist/js/datepicker-full.js

@@ -1603,10 +1603,8 @@
     }
   }
 
-  function onClickPicker(datepicker) {
-    if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
-      datepicker.inputField.focus();
-    }
+  function onMousedownPicker(ev) {
+    ev.preventDefault();
   }
 
   const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
@@ -1751,7 +1749,7 @@
 
       // set up event listeners
       registerListeners(datepicker, [
-        [element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],
+        [element, 'mousedown', onMousedownPicker],
         [main, 'click', onClickView.bind(null, datepicker)],
         [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
         [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],

dist/js/datepicker.js

@@ -1603,10 +1603,8 @@ var Datepicker = (function () {
     }
   }
 
-  function onClickPicker(datepicker) {
-    if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
-      datepicker.inputField.focus();
-    }
+  function onMousedownPicker(ev) {
+    ev.preventDefault();
   }
 
   const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
@@ -1751,7 +1749,7 @@ var Datepicker = (function () {
 
       // set up event listeners
       registerListeners(datepicker, [
-        [element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],
+        [element, 'mousedown', onMousedownPicker],
         [main, 'click', onClickView.bind(null, datepicker)],
         [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
         [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],

js/events/pickerListeners.js

@@ -63,8 +63,6 @@ export function onClickView(datepicker, ev) {
   }
 }
 
-export function onClickPicker(datepicker) {
-  if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
-    datepicker.inputField.focus();
-  }
+export function onMousedownPicker(ev) {
+  ev.preventDefault();
 }

js/picker/Picker.js

@@ -14,7 +14,7 @@ import {
   onClickPrevBtn,
   onClickNextBtn,
   onClickView,
-  onClickPicker,
+  onMousedownPicker,
 } from '../events/pickerListeners.js';
 
 const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
@@ -159,7 +159,7 @@ export default class Picker {
 
     // set up event listeners
     registerListeners(datepicker, [
-      [element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],
+      [element, 'mousedown', onMousedownPicker],
       [main, 'click', onClickView.bind(null, datepicker)],
       [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
       [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],

test/mouse-operation.js

@@ -131,6 +131,36 @@ describe('mouse operation', function () {
     dp.destroy();
   });
 
+  it('move of focus from input by clicking on picker is prevented by canceling mousedown event', function () {
+    const {dp, picker} = createDP(input);
+    const [viewSwitch, prevBtn] = getParts(picker, ['.view-switch', '.prev-btn']);
+    const cells = getCells(picker);
+    let event;
+
+    const listener = ev => {
+      event = ev;
+    };
+    picker.addEventListener('mousedown', listener);
+
+    input.focus();
+    simulant.fire(picker, 'mousedown');
+    expect(event.defaultPrevented, 'to be true');
+
+    event = undefined;
+    simulant.fire(viewSwitch, 'mousedown');
+    expect(event.defaultPrevented, 'to be true');
+
+    event = undefined;
+    simulant.fire(prevBtn, 'mousedown');
+    expect(event.defaultPrevented, 'to be true');
+
+    event = undefined;
+    simulant.fire(cells[11], 'mousedown');
+    expect(event.defaultPrevented, 'to be true');
+
+    dp.destroy();
+  });
+
   describe('view-switch', function () {
     it('changes the view to the next greater one', function () {
       input.value = '04/22/2020';