Add support for openWidgetsOnFocus prop (#154)

wojtekmaj · May 28, 2021 · 50b355e · 50b355e
1 parent 62de9c3
commit 50b355e
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -119,6 +119,7 @@ Displays an input field complete with custom inputs, native input, a calendar, a
 |onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
 |onClockClose|Function called when the clock closes.|n/a|`() => alert('Clock closed')`|
 |onClockOpen|Function called when the clock opens.|n/a|`() => alert('Clock opened')`|
+|openWidgetsOnFocus|Whether to open the widgets on input focus.|`true`|`false`|
 |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"`|
 |required|Whether datetime input should be required.|`false`|`true`|
 |secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|

diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx
@@ -111,7 +111,11 @@ export default class DateTimePicker extends PureComponent {
   }
 
   onFocus = (event) => {
-    const { disabled, onFocus } = this.props;
+    const {
+      disabled,
+      onFocus,
+      openWidgetsOnFocus,
+    } = this.props;
 
     if (onFocus) {
       onFocus(event);
@@ -122,19 +126,21 @@ export default class DateTimePicker extends PureComponent {
       return;
     }
 
-    switch (event.target.name) {
-      case 'day':
-      case 'month':
-      case 'year':
-        this.openCalendar();
-        break;
-      case 'hour12':
-      case 'hour24':
-      case 'minute':
-      case 'second':
-        this.openClock();
-        break;
-      default:
+    if (openWidgetsOnFocus) {
+      switch (event.target.name) {
+        case 'day':
+        case 'month':
+        case 'year':
+          this.openCalendar();
+          break;
+        case 'hour12':
+        case 'hour24':
+        case 'minute':
+        case 'second':
+          this.openClock();
+          break;
+        default:
+      }
     }
   }
 
@@ -429,6 +435,7 @@ DateTimePicker.defaultProps = {
   isCalendarOpen: null,
   isClockOpen: null,
   maxDetail: 'minute',
+  openWidgetsOnFocus: true,
 };
 
 const isValue = PropTypes.oneOfType([
@@ -482,6 +489,7 @@ DateTimePicker.propTypes = {
   onClockClose: PropTypes.func,
   onClockOpen: PropTypes.func,
   onFocus: PropTypes.func,
+  openWidgetsOnFocus: PropTypes.bool,
   required: PropTypes.bool,
   secondAriaLabel: PropTypes.string,
   secondPlaceholder: PropTypes.string,

diff --git a/src/DateTimePicker.spec.jsx b/src/DateTimePicker.spec.jsx
@@ -317,40 +317,116 @@ describe('DateTimePicker', () => {
     expect(calendar2).toHaveLength(1);
   });
 
-  it('opens Calendar component when focusing on a date input inside', () => {
-    const component = mount(
-      <DateTimePicker />,
-    );
+  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(
+        <DateTimePicker />,
+      );
 
-    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 openWidgetsOnFocus = true', () => {
+      const component = mount(
+        <DateTimePicker openWidgetsOnFocus />,
+      );
+
+      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 openWidgetsOnFocus = false', () => {
+      const component = mount(
+        <DateTimePicker openWidgetsOnFocus={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('opens Clock component when focusing on a time input inside', () => {
-    const component = mount(
-      <DateTimePicker />,
-    );
+  describe('handles opening Clock component when focusing on an input inside properly', () => {
+    it('opens Clock component when focusing on an input inside by default', () => {
+      const component = mount(
+        <DateTimePicker />,
+      );
 
-    const clock = component.find('Clock');
-    const input = component.find('input[name^="hour"]');
+      const clock = component.find('Clock');
+      const input = component.find('input[name^="hour"]');
 
-    expect(clock).toHaveLength(0);
+      expect(clock).toHaveLength(0);
 
-    input.simulate('focus');
-    component.update();
+      input.simulate('focus');
+      component.update();
 
-    const clock2 = component.find('Clock');
+      const clock2 = component.find('Clock');
 
-    expect(clock2).toHaveLength(1);
+      expect(clock2).toHaveLength(1);
+    });
+
+    it('opens Clock component when focusing on an input inside given openWidgetsOnFocus = true', () => {
+      const component = mount(
+        <DateTimePicker openWidgetsOnFocus />,
+      );
+
+      const clock = component.find('Clock');
+      const input = component.find('input[name^="hour"]');
+
+      expect(clock).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const clock2 = component.find('Clock');
+
+      expect(clock2).toHaveLength(1);
+    });
+
+    it('does not open Clock component when focusing on an input inside given openWidgetsOnFocus = false', () => {
+      const component = mount(
+        <DateTimePicker openWidgetsOnFocus={false} />,
+      );
+
+      const clock = component.find('Clock');
+      const input = component.find('input[name^="hour"]');
+
+      expect(clock).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const clock2 = component.find('Clock');
+
+      expect(clock2).toHaveLength(0);
+    });
   });
 
   it('closes Calendar component when clicked outside', () => {