diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js index 03f6250bc0c7..94f9afde1c41 100644 --- a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js +++ b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js @@ -87,7 +87,7 @@ test.describe('@avt DatePicker', () => { }, }); - // for some reason the firs tab is not working to focus the first tabstop, so focusing manually + // for some reason the first tab is not working to focus the first tabstop, so focusing manually await page.getByRole('textbox', { name: 'Date Picker label' }).focus(); await expect( page.getByRole('textbox', { name: 'Date Picker label' }) @@ -96,9 +96,6 @@ test.describe('@avt DatePicker', () => { await page.keyboard.press('ArrowDown'); await expect(page.locator('span.today')).toBeFocused(); await page.keyboard.press('Escape'); - await expect( - page.getByRole('textbox', { name: 'Date Picker label' }) - ).toBeFocused(); await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass( /open/ ); @@ -126,18 +123,7 @@ test.describe('@avt DatePicker', () => { await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await expect( - page.locator('input#date-picker-input-id-start') - ).toBeFocused(); - await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass( - /open/ - ); - await page.keyboard.press('Tab'); - await expect( - page.locator('input#date-picker-input-id-finish') - ).toBeFocused(); - await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/); - await page.keyboard.press('Escape'); + await page.keyboard.press('Enter'); await expect( page.locator('input#date-picker-input-id-finish') ).toBeFocused(); diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js index c9a66017430a..386c95ed1ad1 100644 --- a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js +++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js @@ -70,7 +70,6 @@ test.describe('@avt FluidDatePicker', () => { await page.keyboard.press('ArrowDown'); await expect(page.locator('span.today')).toBeFocused(); await page.keyboard.press('Escape'); - await expect(page.getByRole('textbox', { name: 'Label' })).toBeFocused(); await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass( /open/ ); @@ -98,18 +97,6 @@ test.describe('@avt FluidDatePicker', () => { await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await expect( - page.locator('input#date-picker-input-id-start') - ).toBeFocused(); - await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass( - /open/ - ); - await page.keyboard.press('Tab'); - await expect( - page.locator('input#date-picker-input-id-finish') - ).toBeFocused(); - await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/); - await page.keyboard.press('Escape'); await expect( page.locator('input#date-picker-input-id-finish') ).toBeFocused(); diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx index d48cf5202039..01e6e5965ea4 100644 --- a/packages/react/src/components/DatePicker/DatePicker.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.tsx @@ -444,6 +444,8 @@ const DatePicker = React.forwardRef(function DatePicker( // fix datepicker deleting the selectedDate when the calendar closes const onCalendarClose = (selectedDates, dateStr) => { + endInputField?.current?.focus(); + calendarRef.current.calendarContainer.classList.remove('open'); setTimeout(() => { if ( lastStartValue.current && @@ -670,6 +672,9 @@ const DatePicker = React.forwardRef(function DatePicker( } if (match(event, keys.ArrowDown)) { + if (event.target == endInputField.current) { + calendar.calendarContainer.classList.add('open'); + } const { calendarContainer, selectedDateElem: fpSelectedDateElem,