Add support for closeCalendar flag (#251)

Author: wojtekmaj

README.md

@@ -93,6 +93,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |className|Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
 |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
 |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
+|closeCalendar|Whether to close the calendar on value selection.|`true`|`false`|
 |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
 |dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
 |disabled|Whether the date picker should be disabled.|`false`|`true`|

src/DatePicker.jsx

@@ -56,12 +56,14 @@ export default class DatePicker extends PureComponent {
     }
   }
 
-  onChange = (value, closeCalendar = true) => {
-    this.setState({
-      isOpen: !closeCalendar,
-    });
-
+  // eslint-disable-next-line react/destructuring-assignment
+  onChange = (value, closeCalendar = this.props.closeCalendar) => {
     const { onChange } = this.props;
+
+    if (closeCalendar) {
+      this.closeCalendar();
+    }
+
     if (onChange) {
       onChange(value);
     }
@@ -300,6 +302,7 @@ const ClearIcon = (
 DatePicker.defaultProps = {
   calendarIcon: CalendarIcon,
   clearIcon: ClearIcon,
+  closeCalendar: true,
   isOpen: null,
   returnValue: 'start',
 };
@@ -323,6 +326,7 @@ DatePicker.propTypes = {
   ]),
   clearAriaLabel: PropTypes.string,
   clearIcon: PropTypes.node,
+  closeCalendar: PropTypes.bool,
   dayAriaLabel: PropTypes.string,
   dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,

src/DatePicker.spec.jsx

@@ -333,7 +333,7 @@ describe('DatePicker', () => {
     expect(component.state('isOpen')).toBe(true);
   });
 
-  it('closes Calendar when calling internal onChange', () => {
+  it('closes Calendar when calling internal onChange by default', () => {
     const component = mount(
       <DatePicker isOpen />
     );
@@ -345,6 +345,21 @@ describe('DatePicker', () => {
     expect(component.state('isOpen')).toBe(false);
   });
 
+  it('does not close Calendar when calling internal onChange with prop closeCalendar = false', () => {
+    const component = mount(
+      <DatePicker
+        closeCalendar={false}
+        isOpen
+      />
+    );
+
+    const { onChange } = component.instance();
+
+    onChange(new Date());
+
+    expect(component.state('isOpen')).toBe(true);
+  });
+
   it('does not close Calendar when calling internal onChange with closeCalendar = false', () => {
     const component = mount(
       <DatePicker isOpen />