Fix month navigation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reedsy/vuejs-datepicker",
-  "version": "1.6.2-reedsy-2.1.6",
+  "version": "1.6.2-reedsy-2.1.7",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",

src/components/Datepicker.vue

@@ -461,9 +461,12 @@ export default {
      */
     setDate (timestamp) {
       const date = new Date(timestamp);
+
       if (this.shouldChangePage(date)) {
         this.setPageDate(date);
       }
+
+      this.focusedDate = timestamp;
       this.selectedDate = date;
       this.$emit('selected', date);
       this.$emit('update:modelValue', date);
@@ -545,11 +548,14 @@ export default {
         const parsed = new Date(date);
         date = isNaN(parsed.valueOf()) ? null : parsed;
       }
+
       if (!date) {
         this.setPageDate();
         this.selectedDate = null;
         return;
       }
+
+      this.focusedDate = date.getTime();
       this.selectedDate = date;
       this.setPageDate(date);
     },

src/components/PickerDay.vue

@@ -337,6 +337,7 @@ export default {
       const monthsDifference = this.utils.getMonth(newDate)  - this.utils.getMonth(this.pageDate);
       const yearsDifference = this.utils.getFullYear(newDate) - this.utils.getFullYear(this.pageDate);
       const shouldChangePage = monthsDifference !== 0 && (config.forceMonthChange || !(this.sideBySide && monthsDifference === 1));
+
       if (shouldChangePage) {
         this.changeMonth(monthsDifference + yearsDifference * 12);
       }
@@ -393,6 +394,7 @@ export default {
     previousMonth () {
       if (!this.isPreviousMonthDisabled()) {
         const focusedDate = new Date(this.focusedDate);
+        focusedDate.setDate(1); // Ensure correct month changing
         this.utils.setMonth(focusedDate, this.utils.getMonth(focusedDate) - 1, this.useUtc);
         this.moveFocus(focusedDate, { focusCell: false, forceMonthChange: true });
       }
@@ -415,6 +417,7 @@ export default {
     nextMonth () {
       if (!this.isNextMonthDisabled()) {
         const focusedDate = new Date(this.focusedDate);
+        focusedDate.setDate(1); // Ensure correct month changing
         this.utils.setMonth(focusedDate, this.utils.getMonth(focusedDate) + 1, this.useUtc);
         this.moveFocus(focusedDate, { focusCell: false, forceMonthChange: true });
       }

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -53,6 +53,17 @@ describe('Datepicker mounted', () => {
     expect(pageDate.getDate()).toEqual(1);
   });
 
+  it('correctly sets the focusedDate when setting the value from method', async () => {
+    const newDate = new Date(2016, 9, 15);
+    const newDateTs = newDate.getTime();
+    await wrapper.setData({
+      focusedDate: null,
+    });
+    expect(wrapper.vm.focusedDate).toBeNull();
+    wrapper.vm.setValue(newDate);
+    expect(wrapper.vm.focusedDate).toEqual(newDateTs);
+  });
+
   it('sets the date', () => {
     const date = new Date(2016, 9, 9);
     const wrapper = shallowMount(Datepicker, {
@@ -64,6 +75,22 @@ describe('Datepicker mounted', () => {
     expect(wrapper.vm.selectedDate.getTime()).toEqual(date.getTime());
   });
 
+  it('sets the focusedDate when setting the date', async () => {
+    const date = new Date(2016, 9, 9);
+    const newDateTs = date.getTime();
+    const wrapper = shallowMount(Datepicker, {
+      propsData: {
+        format: 'yyyy-MM-dd',
+      },
+    });
+    await wrapper.setData({
+      focusedDate: null,
+    });
+    expect(wrapper.vm.focusedDate).toBeNull();
+    wrapper.vm.setDate(newDateTs);
+    expect(wrapper.vm.focusedDate).toEqual(newDateTs);
+  });
+
   it('changes the page date when selecting a date from a different month', () => {
     const initialDate = new Date(Date.UTC(2016, 8, 9));
     const date = new Date(Date.UTC(2016, 9, 9));

test/unit/specs/PickerDay/changeMonths.spec.js

@@ -28,16 +28,16 @@ describe('PickerDay: changing months', () => {
     expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(0);
   });
 
-  it('changes the focused to the next month', () => {
+  it('changes the focused to the next month and resets the day', () => {
     wrapper.vm.nextMonth();
     expect(wrapper.emitted('update:focusedDate')).toBeTruthy();
-    expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 2, 24).getTime() ]);
+    expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 2, 1).getTime() ]);
   });
 
-  it('changes the focused to the next month', () => {
+  it('changes the focused to the next month and resets the day', () => {
     wrapper.vm.previousMonth();
     expect(wrapper.emitted('update:focusedDate')).toBeTruthy();
-    expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 0, 24).getTime() ]);
+    expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 0, 1).getTime() ]);
   });
 
   it('changes the month when the datepicker is side-by-side and the focus is on the first month', async () => {