Repository: flatpickr/flatpickr (ts)

Issue:
monthSelect plugin: Prev/next buttons only update view after manually selecting a month
### How to Reproduce

(Note that this bug was concealed by #2275. In order to reproduce it, the fiddle uses a version of flatpickr compiled against `master`.)

> https://jsfiddle.net/ryanlue/4aqt2mp0/2/

* Click the text field to open flatpickr. (The calendar has the current month and year selected.)
* Click the prev year button. (The calendar still shows 2020.)
* Select any month. (The text field is populated with a month in 2019.)
* Click the text field again to reopen flatpickr. (The calendar now shows 2019.)
* Click the prev year button again. (The calendar now updates to 2018.)

### Analysis

Under the hood, flatpickr is changing the year that the calendar uses, but [the view is only updated inside of an `if (fp.selectedDates[0])` clause](https://github.com/flatpickr/flatpickr/blob/master/src/plugins/monthSelect/index.ts#L134). 

A pull request with a one-line fix is forthcoming.

## Your Environment

* flatpickr: `master`
* Browser: Firefox 81.0b9
* OS: Debian bullseye

Pull request:
Fix stale year display in monthSelect plugin
Fixes #2277.

Originally, in the monthSelect plugin,
clicking on the prev/next year buttons
failed to update the year shown at the top of the calendar
until after the user made an initial selection.
Under the hood, clicking the prev/next year buttons did change the year,
meaning that the selected month/year would not necessarily match
the month/year displayed in the UI.

This occurred because the line that updates the view
was hidden behind an `if` clause that it shouldn't have been.
This commit moves that line to the appropriate place.

Patch:
diff --git a/src/plugins/monthSelect/index.ts b/src/plugins/monthSelect/index.ts
index b66840db..d5bd402d 100644
--- a/src/plugins/monthSelect/index.ts
+++ b/src/plugins/monthSelect/index.ts
@@ -131,9 +131,11 @@ function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin {
           selectedDate = fp.config.maxDate;
         }
         fp.currentYear = selectedDate.getFullYear();
-        fp.currentYearElement.value = String(fp.currentYear);
         fp.currentMonth = selectedDate.getMonth();
       }
+
+      fp.currentYearElement.value = String(fp.currentYear);
+
       if (fp.rContainer) {
         const months: NodeListOf<ElementDate> = fp.rContainer.querySelectorAll(
           ".flatpickr-monthSelect-month"


Test patch:
diff --git a/__tests__/src/plugins/monthSelect/index.spec.ts b/__tests__/src/plugins/monthSelect/index.spec.ts
index c3903615..1f017e58 100644
--- a/__tests__/src/plugins/monthSelect/index.spec.ts
+++ b/__tests__/src/plugins/monthSelect/index.spec.ts
@@ -80,6 +80,25 @@ describe("monthSelect", () => {
 
         expect(fp.currentYear).toEqual(initYear);
       });
+
+      it("should update displayed year when clicked (#2277)", () => {
+        const initYear = new Date().getFullYear();
+
+        const fp = createInstance({
+          plugins: [monthSelectPlugin()],
+        }) as Instance;
+
+        const prevButton = fp.monthNav.querySelector(".flatpickr-prev-month")!;
+        prevButton.dispatchEvent(new MouseEvent("click"));
+
+        expect(fp.currentYearElement.value).toEqual(`${initYear - 1}`);
+
+        const nextButton = fp.monthNav.querySelector(".flatpickr-next-month")!;
+        nextButton.dispatchEvent(new MouseEvent("click"));
+        nextButton.dispatchEvent(new MouseEvent("click"));
+
+        expect(fp.currentYearElement.value).toEqual(`${initYear + 1}`);
+      });
     });
   });
 });