Add support for openCalendarOnFocus prop (#362)

Author: wojtekmaj

README.md

@@ -108,6 +108,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
 |onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
 |onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
+|openCalendarOnFocus|Whether to open the calendar on input focus.|`true`|`false`|
 |required|Whether date input should be required.|`false`|`true`|
 |returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.|`"start"`|`"range"`|
 |showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|

src/DatePicker.jsx

@@ -70,7 +70,7 @@ export default class DatePicker extends PureComponent {
   }
 
   onFocus = (event) => {
-    const { disabled, onFocus } = this.props;
+    const { disabled, onFocus, openCalendarOnFocus } = this.props;
 
     if (onFocus) {
       onFocus(event);
@@ -81,7 +81,9 @@ export default class DatePicker extends PureComponent {
       return;
     }
 
-    this.openCalendar();
+    if (openCalendarOnFocus) {
+      this.openCalendar();
+    }
   }
 
   openCalendar = () => {
@@ -304,6 +306,7 @@ DatePicker.defaultProps = {
   clearIcon: ClearIcon,
   closeCalendar: true,
   isOpen: null,
+  openCalendarOnFocus: true,
   returnValue: 'start',
 };
 
@@ -345,6 +348,7 @@ DatePicker.propTypes = {
   onCalendarOpen: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
+  openCalendarOnFocus: PropTypes.bool,
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,

src/DatePicker.spec.jsx

@@ -246,22 +246,60 @@ describe('DatePicker', () => {
     expect(calendar2).toHaveLength(1);
   });
 
-  it('opens Calendar component when focusing on an input inside', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+  describe('handles opening Calendar component when focusing on an input inside properly', () => {
+    it('opens Calendar component when focusing on an input inside by default', () => {
+      const component = mount(
+        <DatePicker />,
+      );
 
-    const calendar = component.find('Calendar');
-    const input = component.find('input[name="day"]');
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
 
-    expect(calendar).toHaveLength(0);
+      expect(calendar).toHaveLength(0);
 
-    input.simulate('focus');
-    component.update();
+      input.simulate('focus');
+      component.update();
 
-    const calendar2 = component.find('Calendar');
+      const calendar2 = component.find('Calendar');
 
-    expect(calendar2).toHaveLength(1);
+      expect(calendar2).toHaveLength(1);
+    });
+
+    it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => {
+      const component = mount(
+        <DatePicker openCalendarOnFocus />,
+      );
+
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
+
+      expect(calendar).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const calendar2 = component.find('Calendar');
+
+      expect(calendar2).toHaveLength(1);
+    });
+
+    it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', () => {
+      const component = mount(
+        <DatePicker openCalendarOnFocus={false} />,
+      );
+
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
+
+      expect(calendar).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const calendar2 = component.find('Calendar');
+
+      expect(calendar2).toHaveLength(0);
+    });
   });
 
   it('closes Calendar component when clicked outside', () => {