diff --git a/src/js/DatePicker.js b/src/js/DatePicker.js index 9478793..3b27954 100644 --- a/src/js/DatePicker.js +++ b/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'); diff --git a/tests/unit/DatePickerTest.js b/tests/unit/DatePickerTest.js index 7118f73..199b04b 100644 --- a/tests/unit/DatePickerTest.js +++ b/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', () => {