fix: CORUI-6949: add onBlur callback to DatePicker

src/DatePicker/DatePicker.js

@@ -207,12 +207,17 @@ class DatePicker extends Component {
 
     clickOutside = () => {
         this.validateDates();
-        this.setState({ hidden: true });
+        this.setState({
+            hidden: true
+        }, () => {
+            this.props.onBlur({
+                date: this.state.selectedDate,
+                formattedDate: this.state.formattedDate
+            });
+        });
     };
 
     updateDate = (date) => {
-        // console.log('Inside updateDate function. The event is: ', date);
-
         if (this.props.enableRangeSelection) {
             if (date.length === 2) {
                 let firstDateMonth = date[0].getMonth() + 1;
@@ -266,10 +271,17 @@ class DatePicker extends Component {
         }
     }
 
+    _handleBlur = () => {
+        this.props.onBlur({
+            date: this.state.selectedDate,
+            formattedDate: this.state.formattedDate
+        });
+    };
+
     render() {
         const { enableRangeSelection, disableWeekends, disableBeforeDate, disableAfterDate,
             disableWeekday, disablePastDates, disableFutureDates, blockedDates, disabledDates,
-            compact, className, inputProps, buttonProps, ...props } = this.props;
+            compact, className, inputProps, buttonProps, onBlur, ...props } = this.props;
 
         const datePickerClasses = classnames(
             'fd-date-picker',
@@ -303,6 +315,7 @@ class DatePicker extends Component {
                             <input
                                 {...inputProps}
                                 className={datePickerInputClasses}
+                                onBlur={this._handleBlur}
                                 onChange={this.modifyDate}
                                 onClick={() => this.openCalendar('input')}
                                 onKeyPress={this.sendUpdate}
@@ -350,12 +363,18 @@ DatePicker.propTypes = {
     buttonProps: PropTypes.object,
     compact: PropTypes.bool,
     enableRangeSelection: PropTypes.bool,
-    inputProps: PropTypes.object
+    inputProps: PropTypes.object,
+    onBlur: PropTypes.func
+};
+
+DatePicker.defaultProps = {
+    onBlur: () => {}
 };
 
 DatePicker.propDescriptions = {
     ...Calendar.propDescriptions,
-    enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).'
+    enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).',
+    onBlur: 'Callback function for onBlur events. In the object returned, `date` is the date object and `formattedDate` is the formatted date.'
 };
 
 export default DatePicker;

src/DatePicker/DatePicker.test.js

@@ -367,6 +367,37 @@ describe('<DatePicker />', () => {
         expect(wrapper.state('formattedDate')).toEqual('05/04/2018');
     });
 
+    describe('onBlur callback', () => {
+        test('should call onBlur after clicking outside calendar overlay', () => {
+            const blur = jest.fn();
+            const element = mount(<DatePicker onBlur={blur} />);
+
+            element.find('button.fd-popover__control.fd-button--light.sap-icon--calendar').simulate('click', { type: 'input' });
+
+            element.find('table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)')
+                .at(0)
+                .simulate('click');
+
+            let event = new MouseEvent('mousedown', { target: document.querySelector('body') });
+            document.dispatchEvent(event);
+
+            expect(blur).toHaveBeenCalledTimes(1);
+
+            expect(blur).toHaveBeenCalledWith(expect.objectContaining({ date: expect.any(Date) }));
+        });
+        test('should call onBlur after leaving input', () => {
+            const blur = jest.fn();
+            const element = mount(<DatePicker onBlur={blur} />);
+
+            element.find('input[type="text"]').simulate('click', { type: 'input' });
+
+            let event = new MouseEvent('mousedown', { target: document.querySelector('body') });
+            document.dispatchEvent(event);
+
+            expect(blur).toHaveBeenCalledTimes(1);
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the DatePicker component', () => {
             const element = mount(<DatePicker data-sample='Sample' />);