diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js index 53c8d7f37..dcf7e8ee4 100644 --- a/app/assets/javascripts/radioSelect.js +++ b/app/assets/javascripts/radioSelect.js @@ -63,8 +63,13 @@ `) }; - let focusSelected = function(component) { - $('[type=radio]:checked', component).focus(); + let shiftFocus = function(target, component) { + if (target === 'now') { + $('[type=radio]', component).eq(0).focus(); + } + if (target === 'time') { + $('[type=radio]', component).eq(1).focus(); + } }; Modules.RadioSelect = function() { @@ -96,6 +101,7 @@ 'name': name, 'showNowAsDefault': showNowAsDefault }); + shiftFocus('now', component); }; const selectOption = (value) => { render('chosen', { @@ -105,7 +111,7 @@ 'name': name, 'showNowAsDefault': showNowAsDefault }); - focusSelected(component); + shiftFocus('time', component); }; const trackMouseup = (event) => { const parentNode = event.target.parentNode; @@ -134,7 +140,7 @@ 'name': name, 'showNowAsDefault': showNowAsDefault }); - focusSelected(component); + shiftFocus('time', component); }) .on('mousedown', '.js-option', function(event) { @@ -169,20 +175,21 @@ 'name': name, 'showNowAsDefault': showNowAsDefault }); + shiftFocus('time', component); } else { reset(); + shiftFocus('now', component); } - focusSelected(component); }) .on('click', '.radio-select__button--reset', function(event) { event.preventDefault(); reset(); - focusSelected(component); + shiftFocus('now', component); }); diff --git a/tests/javascripts/radioSelect.test.js b/tests/javascripts/radioSelect.test.js index ab5420e07..c4a6cb03f 100644 --- a/tests/javascripts/radioSelect.test.js +++ b/tests/javascripts/radioSelect.test.js @@ -228,9 +228,9 @@ describe('RadioSelect', () => { }); - test("keep focus on the default time slot", () => { + test("focus the first time slot", () => { - expect(document.activeElement).toBe(document.getElementById('scheduled_for-0')); + expect(document.activeElement).toBe(document.getElementById('scheduled_for-1')); }); @@ -347,6 +347,14 @@ describe('RadioSelect', () => { }) + test("focus the selected option", () => { + + selectedOption = document.querySelector('.radio-select__column:nth-child(2) input[checked=checked]'); + + expect(document.activeElement).toBe(selectedOption); + + }); + }); describe("selecting an option with the enter key should", () => { @@ -398,6 +406,14 @@ describe('RadioSelect', () => { }) + test("focus the selected option", () => { + + selectedOption = document.querySelector('.radio-select__column:nth-child(2) input[checked=checked]'); + + expect(document.activeElement).toBe(selectedOption); + + }); + }); test("clicking the 'Done' button should choose whatever time is selected", () => {