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,