Merge pull request #604 from ah-adarlow/master

Fixed DayPickerInput not calling dayPickerProps.onMonthChange
gpbl · Jan 9, 2018 · 305bd5a · 305bd5a
2 parents 8c69e20 + 87ebbcd
commit 305bd5a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git 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>
     );

diff --git 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);
+      });
+    });
   });
 });