Repository: flatpickr/flatpickr
Pull request #2127 (2020-03-09 14:39:09)

Replaced 'mousedown' events with 'click' events.
This PR addresses issue #2126.

yadue: @chmln any update on this? it breaks link in angular apps

Patch:
diff --git a/src/index.ts b/src/index.ts
index f3274dc6..5e3a6359 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -376,9 +376,7 @@ function FlatpickrInstance(
   }
 
   /**
-   * A mousedown handler which mimics click.
-   * Minimizes latency, since we don't need to wait for mouseup in most cases.
-   * Also, avoids handling right clicks.
+   * A click handler, avoids handling right clicks.
    *
    * @param {Function} handler the event handler
    */
@@ -433,19 +431,19 @@ function FlatpickrInstance(
 
     if (window.ontouchstart !== undefined)
       bind(window.document, "touchstart", documentClick);
-    else bind(window.document, "mousedown", onClick(documentClick));
+    else bind(window.document, "click", onClick(documentClick));
     bind(window.document, "focus", documentClick, { capture: true });
 
     if (self.config.clickOpens === true) {
       bind(self._input, "focus", self.open);
-      bind(self._input, "mousedown", onClick(self.open));
+      bind(self._input, "click", onClick(self.open));
     }
 
     if (self.daysContainer !== undefined) {
-      bind(self.monthNav, "mousedown", onClick(onMonthNavClick));
+      bind(self.monthNav, "click", onClick(onMonthNavClick));
 
       bind(self.monthNav, ["keyup", "increment"], onYearInput);
-      bind(self.daysContainer, "mousedown", onClick(selectDate));
+      bind(self.daysContainer, "click", onClick(selectDate));
     }
 
     if (
@@ -457,7 +455,7 @@ function FlatpickrInstance(
         (getEventTarget(e) as HTMLInputElement).select();
       bind(self.timeContainer, ["increment"], updateTime);
       bind(self.timeContainer, "blur", updateTime, { capture: true });
-      bind(self.timeContainer, "mousedown", onClick(timeIncrement));
+      bind(self.timeContainer, "click", onClick(timeIncrement));
 
       bind([self.hourElement, self.minuteElement], ["focus", "click"], selText);
 
@@ -471,7 +469,7 @@ function FlatpickrInstance(
       if (self.amPM !== undefined) {
         bind(
           self.amPM,
-          "mousedown",
+          "click",
           onClick(e => {
             updateTime(e);
             triggerChange();
diff --git a/src/plugins/monthSelect/index.ts b/src/plugins/monthSelect/index.ts
index c976129c..823be15b 100644
--- a/src/plugins/monthSelect/index.ts
+++ b/src/plugins/monthSelect/index.ts
@@ -51,7 +51,7 @@ function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin {
         selectYear();
       });
 
-      fp._bind(fp.nextMonthNav, "mousedown", () => {
+      fp._bind(fp.nextMonthNav, "click", () => {
         fp.currentYear += 1;
         selectYear();
       });


Test patch:
diff --git a/src/__tests__/index.spec.ts b/src/__tests__/index.spec.ts
index f6738aea..c2ca6cda 100644
--- a/src/__tests__/index.spec.ts
+++ b/src/__tests__/index.spec.ts
@@ -64,7 +64,7 @@ function incrementTime(
   if (e !== undefined && e.parentNode)
     for (let i = times; i--; )
       simulate(
-        "mousedown",
+        "click",
         e.parentNode.childNodes[childNodeNum],
         { which: 1 },
         MouseEvent
@@ -86,9 +86,9 @@ function simulate(
   onElement.dispatchEvent(evt);
 }
 
-// mousedown click
+// simulate click
 const clickOn = (element: Node) => {
-  simulate("mousedown", element, { which: 1 }, CustomEvent);
+  simulate("click", element, { which: 1 }, CustomEvent);
 };
 
 describe("flatpickr", () => {
@@ -636,7 +636,7 @@ describe("flatpickr", () => {
       fp._input.focus();
 
       expect(fp.isOpen).toBe(true);
-      simulate("mousedown", window.document.body, { which: 1 }, CustomEvent);
+      simulate("click", window.document.body, { which: 1 }, CustomEvent);
       fp._input.blur();
 
       expect(fp.isOpen).toBe(false);
@@ -645,7 +645,7 @@ describe("flatpickr", () => {
       expect(fp.selectedDates.length).toBe(0);
       simulate("focus", fp._input);
       simulate(
-        "mousedown",
+        "click",
         fp.days.childNodes[15],
         { which: 1, bubbles: true },
         CustomEvent
@@ -653,7 +653,7 @@ describe("flatpickr", () => {
       expect(fp.selectedDates.length).toBe(1);
 
       fp.isOpen = true;
-      simulate("mousedown", window.document.body, { which: 1 }, CustomEvent);
+      simulate("click", window.document.body, { which: 1 }, CustomEvent);
       expect(fp.isOpen).toBe(false);
       expect(fp.selectedDates.length).toBe(0);
       expect(fp._input.value).toBe("");
@@ -800,7 +800,7 @@ describe("flatpickr", () => {
       fp.jumpToDate("2017-1-1");
       expect(fp.currentMonth).toBe(0);
 
-      simulate("mousedown", fp.days.childNodes[41], { which: 1 }, MouseEvent);
+      simulate("click", fp.days.childNodes[41], { which: 1 }, MouseEvent);
       expect(fp.selectedDates.length).toBe(1);
       expect(fp.currentMonth).toBe(1);
     });
@@ -829,10 +829,10 @@ describe("flatpickr", () => {
       });
 
       fp.open();
-      simulate("mousedown", fp.prevMonthNav, { which: 1 }, CustomEvent);
+      simulate("click", fp.prevMonthNav, { which: 1 }, CustomEvent);
       expect(fp.currentMonth).toEqual(0);
 
-      simulate("mousedown", fp.days.children[2], { which: 1 }, CustomEvent);
+      simulate("click", fp.days.children[2], { which: 1 }, CustomEvent);
       expect(fp.currentMonth).toEqual(0);
     });
 
@@ -990,7 +990,7 @@ describe("flatpickr", () => {
       });
 
       fp.open();
-      simulate("mousedown", fp.days.childNodes[15], { which: 1 }, MouseEvent); // oct 10
+      simulate("click", fp.days.childNodes[15], { which: 1 }, MouseEvent); // oct 10
 
       verifySelected(fp.selectedDates[0]);
     });
@@ -1033,7 +1033,7 @@ describe("flatpickr", () => {
       incrementTime("minuteElement", 1);
       expect(fp.minuteElement.value).toEqual("05");
 
-      simulate("mousedown", fp.amPM, { which: 1 }, MouseEvent);
+      simulate("click", fp.amPM, { which: 1 }, MouseEvent);
       expect(fp.amPM.textContent).toEqual("PM");
 
       simulate("increment", fp.hourElement, {
@@ -1204,7 +1204,7 @@ describe("flatpickr", () => {
         defaultMinute: 45,
       });
 
-      simulate("mousedown", fp.todayDateElem as DayElement, { which: 1 });
+      simulate("click", fp.todayDateElem as DayElement, { which: 1 });
       expect((fp.latestSelectedDateObj as Date).getHours()).toEqual(12);
       expect((fp.latestSelectedDateObj as Date).getMinutes()).toEqual(45);
 
@@ -1215,7 +1215,7 @@ describe("flatpickr", () => {
         defaultMinute: 0,
       });
 
-      simulate("mousedown", fp.todayDateElem as DayElement, { which: 1 });
+      simulate("click", fp.todayDateElem as DayElement, { which: 1 });
       expect((fp.latestSelectedDateObj as Date).getHours()).toEqual(6);
       expect((fp.latestSelectedDateObj as Date).getMinutes()).toEqual(30);
     });
@@ -1265,7 +1265,7 @@ describe("flatpickr", () => {
       incrementTime("hourElement", 3);
       expect(hours.value).toBe("04");
 
-      simulate("mousedown", amPM, { which: 1 }, MouseEvent);
+      simulate("click", amPM, { which: 1 }, MouseEvent);
       expect(amPM.textContent).toBe("AM");
 
       fp.clear();
@@ -1395,7 +1395,7 @@ describe("flatpickr", () => {
         expect(day(i).classList.contains("flatpickr-disabled")).toEqual(false);
       }
 
-      simulate("mousedown", fp.days.childNodes[17], { which: 1 }, MouseEvent);
+      simulate("click", fp.days.childNodes[17], { which: 1 }, MouseEvent);
       expect(fp.selectedDates.length).toEqual(2);
       expect(fp.input.value).toEqual("2016-01-13 to 2016-01-17");
     });
@@ -1413,13 +1413,13 @@ describe("flatpickr", () => {
       expect(isArrowDisabled("prevMonthNav")).toBe(true);
       expect(isArrowDisabled("nextMonthNav")).toBe(false);
 
-      simulate("mousedown", fp.nextMonthNav, { which: 1 }, MouseEvent);
+      simulate("click", fp.nextMonthNav, { which: 1 }, MouseEvent);
 
       expect(fp.currentMonth).toBe(1);
       expect(isArrowDisabled("prevMonthNav")).toBe(false);
       expect(isArrowDisabled("nextMonthNav")).toBe(false);
 
-      simulate("mousedown", fp.nextMonthNav, { which: 1 }, MouseEvent);
+      simulate("click", fp.nextMonthNav, { which: 1 }, MouseEvent);
 
       expect(fp.currentMonth).toBe(2);
       expect(isArrowDisabled("prevMonthNav")).toBe(false);