From ea09ebd110c3fc1fcc713ff05f0663158dc50202 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Shibuya Date: Sat, 12 Mar 2022 16:40:01 +0900 Subject: [PATCH] Fix #2419 breaking with altInput and altFormat Enabled Fixes #2653, Fixes #2660, Refs. #2541, #2601 --- __tests__/src/index.spec.ts | 61 ++++++++++++++++++++++++++++++++++++- src/index.ts | 27 ++++++---------- 2 files changed, 69 insertions(+), 19 deletions(-) diff --git a/__tests__/src/index.spec.ts b/__tests__/src/index.spec.ts index 5b21868dd..18a6fa00d 100644 --- a/__tests__/src/index.spec.ts +++ b/__tests__/src/index.spec.ts @@ -751,6 +751,41 @@ describe("flatpickr", () => { expect(fp.selectedDates[0]).toEqual(new Date("2020-01-22T00:00:00")); expect(fp._input.value).toBe("22 January 2020"); }); + + it("should be updated correctly via mouse events when altInput is enabled #2653", () => { + createInstance({ + allowInput: true, + altInput: true, + altFormat: "j F Y H:i", + defaultDate: "2020-01-22 03:04", + enableTime: true, + }); + + expect(fp.selectedDates[0]).toEqual(new Date("2020-01-22T03:04:00")); + simulate("focus", fp._input); + simulate("mousedown", window.document.body, { which: 1 }, CustomEvent); + expect(fp.isOpen).toBe(false); + expect(fp._input.value).toBe("22 January 2020 03:04"); + }); + + it("should trigger onChange only once", () => { + let timesFired = 0; + + createInstance({ + allowInput: true, + altInput: true, + altFormat: "j F Y H:i", + enableTime: true, + onChange: () => timesFired++, + }); + + simulate("focus", fp._input); + fp._input.value = "22 January 2020 03:04"; + simulate("mousedown", window.document.body, { which: 1 }, CustomEvent); + simulate("blur", fp._input); + expect(fp.isOpen).toBe(false); + expect(timesFired).toEqual(1); + }); }); it("onKeyDown", () => { @@ -817,6 +852,29 @@ describe("flatpickr", () => { expect(fp.currentYear).toBe(2016); }); + it("onKeyDown closes flatpickr on Enter when allowInput set to true", () => { + createInstance({ + enableTime: true, + allowInput: true, + altInput: true, + }); + + fp.jumpToDate("2016-2-1"); + + fp.open(); + (fp.days.childNodes[15] as HTMLSpanElement).focus(); + + simulate( + "keydown", + fp._input, + { + keyCode: 13, // "Enter" + }, + KeyboardEvent + ); + expect(fp.isOpen).toEqual(false); + }); + it("enabling dates by function", () => { createInstance({ enable: [(d) => d.getDate() === 6, new Date()], @@ -1830,10 +1888,11 @@ describe("flatpickr", () => { it("doesn't misfire", () => { let timesFired = 0; const fp = createInstance({ + allowInput: true, onChange: () => timesFired++, }); fp._input.focus(); - document.body.focus(); + simulate("blur", fp._input); expect(timesFired).toEqual(0); }); }); diff --git a/src/index.ts b/src/index.ts index 1bfe787a1..ca019b463 100644 --- a/src/index.ts +++ b/src/index.ts @@ -197,17 +197,12 @@ function FlatpickrInstance( timeWrapper(e); } - const valueFromInput = self._input.value; - const dateFromInput = self.parseDate(valueFromInput); - const latestDate = self.latestSelectedDateObj; - if (valueFromInput && latestDate && dateFromInput?.getTime() !== latestDate?.getTime()) { - setDate(dateFromInput!); - } else { - setHoursFromInputs(); - } + const prevValue = self._input.value; + + setHoursFromInputs(); updateValue(); - if (self._input.value !== valueFromInput) { + if (self._input.value !== prevValue) { self._debouncedChange(); } } @@ -1470,13 +1465,9 @@ function FlatpickrInstance( ~(e as any).path.indexOf(self.altInput))); const lostFocus = - e.type === "blur" - ? isInput && - e.relatedTarget && - !isCalendarElem(e.relatedTarget as HTMLElement) - : !isInput && - !isCalendarElement && - !isCalendarElem(e.relatedTarget as HTMLElement); + !isInput && + !isCalendarElement && + !isCalendarElem(e.relatedTarget as HTMLElement); const isIgnored = !self.config.ignoredFocusElements.some((elem) => elem.contains(eventTarget as Node) @@ -1486,7 +1477,7 @@ function FlatpickrInstance( if (self.config.allowInput) { self.setDate( self._input.value, - true, + false, self.config.altInput ? self.config.altFormat : self.config.dateFormat @@ -1502,7 +1493,7 @@ function FlatpickrInstance( ) { updateTime(); } - + self.close(); if (