diff --git a/README.md b/README.md
index beaf7919..b383555b 100644
--- 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
index 86a897c3..949124a9 100644
--- 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
index 1d59219a..e4db813c 100644
--- 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(
- ,
- );
+ 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(
+ ,
+ );
- 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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(
- ,
- );
+ 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(
+ ,
+ );
- 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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', () => {