Repository: gpbl/react-day-picker (ts)

Issue:
DayPickerInput doesn't call dayPickerProps.onMonthChange
DayPickerInput overrides the onMonthChange handler passed in through dayPickerProps and doesn't call it when the month changes.

See DayPickerInput.js line 446.

https://codesandbox.io/s/km00lz2vq3

  

Pull request:
Fixed DayPickerInput not calling dayPickerProps.onMonthChange
fixes #603 


Patch:
diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js
index 03345b2dd..a5ca65c5f 100644
--- a/src/DayPickerInput.js
+++ b/src/DayPickerInput.js
@@ -122,6 +122,7 @@ export default class DayPickerInput extends React.Component {
     this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
     this.handleInputKeyUp = this.handleInputKeyUp.bind(this);
     this.handleDayClick = this.handleDayClick.bind(this);
+    this.handleMonthChange = this.handleMonthChange.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -356,6 +357,17 @@ export default class DayPickerInput extends React.Component {
     }
   }
 
+  handleMonthChange(month) {
+    this.setState({ month }, () => {
+      if (
+        this.props.dayPickerProps &&
+        this.props.dayPickerProps.onMonthChange
+      ) {
+        this.props.dayPickerProps.onMonthChange(month);
+      }
+    });
+  }
+
   handleDayClick(day, modifiers, e) {
     const {
       clickUnselectsDay,
@@ -443,7 +455,7 @@ export default class DayPickerInput extends React.Component {
           month={this.state.month}
           selectedDays={selectedDay}
           onDayClick={this.handleDayClick}
-          onMonthChange={month => this.setState({ month })}
+          onMonthChange={this.handleMonthChange}
         />
       </Overlay>
     );


Test patch:
diff --git a/test/daypickerinput/events.js b/test/daypickerinput/events.js
index 1fffec210..c948ddf67 100644
--- a/test/daypickerinput/events.js
+++ b/test/daypickerinput/events.js
@@ -370,5 +370,40 @@ describe('DayPickerInput', () => {
         expect(selectedDays.at(1)).toHaveText('9');
       });
     });
+
+    describe('onMonthChange', () => {
+      it('should update state when month changes', () => {
+        const wrapper = mount(
+          <DayPickerInput
+            dayPickerProps={{
+              initialMonth: new Date(2015, 7),
+            }}
+          />
+        );
+        const instance = wrapper.instance();
+        instance.showDayPicker();
+        wrapper.update();
+        instance.getDayPicker().showNextMonth();
+        expect(instance.state.month.getMonth()).toEqual(8);
+      });
+
+      it('should call onMonthChange when month changes', () => {
+        const handleMonthChange = jest.fn();
+        const wrapper = mount(
+          <DayPickerInput
+            dayPickerProps={{
+              onMonthChange: handleMonthChange,
+              initialMonth: new Date(2015, 7),
+            }}
+          />
+        );
+        const instance = wrapper.instance();
+        instance.showDayPicker();
+        wrapper.update();
+        instance.getDayPicker().showNextMonth();
+        expect(handleMonthChange).toHaveBeenCalled();
+        expect(handleMonthChange.mock.calls[0][0].getMonth()).toEqual(8);
+      });
+    });
   });
 });