Maintain focus in the date field if user is typing a date

Also make sure the enhancements are run to prevent unstyled elements from appearing

Closes #23

src/js/DatePicker.js

@@ -125,6 +125,8 @@ class DatePicker {
             // Switch off autocomplete to avoid it overlapping the date picker
             $datePickerInput.attr('autocomplete', 'off');
 
+            $datePickerInput.on('keyup', this.enhanceDatePicker.bind(this, $datePickerInput));
+
             $linkedTriggerButton.on('click', this.enhanceDatePicker.bind(this, $datePickerInput));
         });
 
@@ -160,7 +162,13 @@ class DatePicker {
             // If today isn't on the displayed month, use either the selected date (active) or the first of the month
             $today = this.$html.find('.ui-state-active') || this.$html.find('.ui-state-default').first();
         }
-        $today.trigger('focus');
+
+        // If user is typing into the date field, maintain focus there isntead of the value of today
+        if (event.type === 'keyup') {
+            this.$dateInput.trigger('focus');
+        } else {
+            $today.trigger('focus');
+        }
 
         this.$datePickerContainer.attr('role', 'application');
         this.$datePickerContainer.attr('aria-label', 'Calendar view date-picker');

tests/unit/DatePickerTest.js

@@ -21,6 +21,7 @@ describe('DatePicker', () => {
     let clickEvent = $.Event('click');
     let nextMonthClickEvent = $.Event('click');
     let prevMonthClickEvent = $.Event('click');
+    let keyUpEvent = $.Event('keyup');
     let keyDownEventMisc = $.Event('keydown');
     let keyDownEventEsc = $.Event('keydown');
     let keyDownEventShiftTab = $.Event('keydown');
@@ -277,6 +278,7 @@ describe('DatePicker', () => {
     describe('When the date picker trigger button is clicked', () => {
         beforeEach(() => {
             datePicker.init($body);
+            keyDownEventMisc.keyCode = 37;
         });
 
         it('should prevent default', () => {
@@ -360,6 +362,14 @@ describe('DatePicker', () => {
             expect($body.find('.ui-datepicker-prev .hide').text()).to.equal('Previous Month, March 2020');
             expect($body.find('.ui-datepicker-next .hide').text()).to.equal('Next Month, May 2020');
         });
+
+        it('should maintain focus on the date field if typing a date', () => {
+            $formGroup1.find('#trigger-button-1').trigger(clickEvent);
+
+            $formGroup1.find('[data-pulsar-datepicker="true"]').trigger(keyUpEvent);
+
+            expect($formGroup1.find('[data-pulsar-datepicker="true"]').is(':focus')).to.be.true;
+        });
     });
 
     describe('When a key is pressed within the date picker', () => {