diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js index 87a253e94eaa..26d3ddca6951 100644 --- a/packages/react/src/components/DatePicker/DatePicker-test.js +++ b/packages/react/src/components/DatePicker/DatePicker-test.js @@ -709,6 +709,32 @@ describe('Single date picker', () => { expect(document.body).toHaveFocus(); expect(onClose).toHaveBeenCalledTimes(2); }); + + it('should keep native tab navigation when `readOnly` is true', async () => { + render( + <> + + + + + + ); + + const dateInput = screen.getByLabelText('Read only input'); + const nextFocusTarget = screen.getByTestId('next-focus-target'); + const calendar = screen.getByRole('application'); + + expect(calendar).not.toHaveClass('open'); + expect(document.body).toHaveFocus(); + await userEvent.tab(); + expect(dateInput).toHaveFocus(); + expect(calendar).not.toHaveClass('open'); + await userEvent.tab(); + expect(nextFocusTarget).toHaveFocus(); + expect(calendar).not.toHaveClass('open'); + }); }); describe('Range date picker', () => { diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx index 7dc68da4670d..6060002bfd86 100644 --- a/packages/react/src/components/DatePicker/DatePicker.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.tsx @@ -654,6 +654,8 @@ const DatePicker = forwardRef((props, ref) => { calendarRef.current = calendar; const handleInputFieldKeyDown = (event: KeyboardEvent) => { + if (readOnly && match(event, keys.Tab)) return; + const { calendarContainer, selectedDateElem: fpSelectedDateElem,