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', () => {