Add support for openClockOnFocus prop (#119)

Author: wojtekmaj

README.md

@@ -107,6 +107,7 @@ Displays an input field complete with custom inputs, native input and a clock.
 |onChange|Function called when the user picks a valid time.|n/a|`(value) => alert('New time 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')`|
+|openClockOnFocus|Whether to open the clock on input focus.|`true`|`false`|
 |required|Whether date input should be required.|`false`|`true`|
 |secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|
 |secondPlaceholder|`placeholder` for the second input.|`"--"`|`"ss"`|

src/TimePicker.jsx

@@ -71,7 +71,7 @@ export default class TimePicker extends PureComponent {
   }
 
   onFocus = (event) => {
-    const { disabled, onFocus } = this.props;
+    const { disabled, onFocus, openClockOnFocus } = this.props;
 
     if (onFocus) {
       onFocus(event);
@@ -82,7 +82,9 @@ export default class TimePicker extends PureComponent {
       return;
     }
 
-    this.openClock();
+    if (openClockOnFocus) {
+      this.openClock();
+    }
   }
 
   openClock = () => {
@@ -310,6 +312,7 @@ TimePicker.defaultProps = {
   closeClock: true,
   isOpen: null,
   maxDetail: 'minute',
+  openClockOnFocus: true,
 };
 
 const isValue = PropTypes.oneOfType([
@@ -351,6 +354,7 @@ TimePicker.propTypes = {
   onClockClose: PropTypes.func,
   onClockOpen: PropTypes.func,
   onFocus: PropTypes.func,
+  openClockOnFocus: PropTypes.bool,
   required: PropTypes.bool,
   secondAriaLabel: PropTypes.string,
   secondPlaceholder: PropTypes.string,

src/TimePicker.spec.jsx

@@ -248,22 +248,60 @@ describe('TimePicker', () => {
     expect(clock2).toHaveLength(1);
   });
 
-  it('opens Clock component when focusing on an input inside', () => {
-    const component = mount(
-      <TimePicker />,
-    );
+  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(
+        <TimePicker />,
+      );
 
-    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 openClockOnFocus = true', () => {
+      const component = mount(
+        <TimePicker openClockOnFocus />,
+      );
+
+      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 openClockOnFocus = false', () => {
+      const component = mount(
+        <TimePicker openClockOnFocus={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 Clock component when clicked outside', () => {