fix(ffe-datepicker-react): Press Enter to close calendar

This commit makes a simple improvement to keyboard navigation of the
datepicker by allowing the calendar to be closed by pressing Enter while
the date input field has focus.

This solution is slightly different from the suggested solution. While the
suggestions solution said the calendar would only close if the date is
valid, this solution closes the calendar regardless and triggers validation.
This allows us to show an error message to the user, rather than keeping
them stuck in the calendar.

This commit also removes the `onKeyPress` listener from Input.
The reason for doing so is that the dual key listeners conflicted with the
initial changes of this commit.
I did extensive testing to assure this is a safe change to make. I am also
reassured by the fact that we don't use this listener anywhere else in our
code, while we use the `onKeyDown` listener extensively.

This fixes #14

packages/ffe-datepicker-react/src/datepicker/Datepicker.js

@@ -154,8 +154,13 @@ export default class Datepicker extends Component {
     }
 
     onInputKeydown(evt) {
-        if (!this.state.displayDatePicker && evt.which === KeyCode.ENTER) {
-            this.openCalendar();
+        if (evt.which === KeyCode.ENTER) {
+            if (!this.state.displayDatePicker) {
+                this.openCalendar();
+            } else {
+                this.validateDateIntervals();
+                this.closeCalendar();
+            }
         } else if (evt.shiftKey && evt.which === KeyCode.TAB) {
             this.closeCalendarSetInputFocus();
         }

packages/ffe-datepicker-react/src/datepicker/Datepicker.spec.js

@@ -6,6 +6,7 @@ import Calendar from '../calendar';
 import Datepicker from './Datepicker';
 import i18n from '../i18n/i18n';
 import ErrorTypes from '../datelogic/error-types';
+import { KeyCodes } from '../../../ffe-account-selector-react/src/util/types';
 
 const defaultProps = {
     value: '',
@@ -408,4 +409,43 @@ describe('<Datepicker />', () => {
             });
         });
     });
+
+    describe('validate correct visibility of Calendar on DateInput key press', () => {
+        const openCalendar = wrapper => {
+            const input = wrapper.find('input');
+            input.simulate('click');
+        };
+        const keyDownInInput = (wrapper, keyCode) => {
+            const input = wrapper.find('input');
+            input.simulate('keydown', { which: keyCode });
+        };
+
+        describe('when pressing Enter', () => {
+            it('should close and open calendar if pressed twice', () => {
+                const wrapper = getMountedWrapper({
+                    value: '31.12.2016',
+                    maxDate: '01.01.2016',
+                });
+                openCalendar(wrapper);
+                expect(wrapper.find(Calendar).exists()).toBe(true);
+
+                keyDownInInput(wrapper, KeyCodes.ENTER);
+                expect(wrapper.find(Calendar).exists()).toBe(false);
+
+                keyDownInInput(wrapper, KeyCodes.ENTER);
+                expect(wrapper.find(Calendar).exists()).toBe(true);
+            });
+
+            it('with invalid date it has correct error-class', () => {
+                const wrapper = getMountedWrapper({
+                    value: '31.12.2016',
+                    maxDate: '01.01.2016',
+                });
+                openCalendar(wrapper);
+                expect(wrapper.find(ERROR_CLASS).exists()).toBe(false);
+                keyDownInInput(wrapper, KeyCodes.ENTER);
+                expect(wrapper.find(ERROR_CLASS).exists()).toBe(true);
+            });
+        });
+    });
 });

packages/ffe-datepicker-react/src/input/Input.js

@@ -37,7 +37,6 @@ export default class Input extends Component {
                     onFocus={onFocus}
                     onBlur={onBlur}
                     onChange={onChange}
-                    onKeyPress={onKeyDown}
                     onKeyDown={onKeyDown}
                     ref={c => {
                         this._input = c;

packages/ffe-datepicker-react/src/input/Input.spec.js

@@ -78,7 +78,7 @@ describe('<Input />', () => {
         it('should delegate key down events', () => {
             const spy = jest.fn();
             const input = getWrapper({ onKeyDown: spy }).find('input');
-            input.simulate('keypress');
+            input.simulate('keydown');
             expect(spy).toHaveBeenCalledTimes(1);
         });
     });