diff --git a/packages/react-component-library/src/components/DatePicker/Input.tsx b/packages/react-component-library/src/components/DatePicker/Input.tsx
index 3fc997300..ab4ba20a6 100644
--- a/packages/react-component-library/src/components/DatePicker/Input.tsx
+++ b/packages/react-component-library/src/components/DatePicker/Input.tsx
@@ -120,9 +120,15 @@ export const Input = memo(
 
     const handleInputClick = useCallback(() => {
       if (isRange) {
-        dispatch({ type: DATEPICKER_ACTION.TOGGLE_OPEN })
+        dispatch({
+          type: DATEPICKER_ACTION.UPDATE,
+          data: {
+            calendarTableVariant: CALENDAR_TABLE_VARIANT.HIDE,
+            isOpen: !isOpen,
+          },
+        })
       }
-    }, [isRange, dispatch])
+    }, [isOpen, isRange, dispatch])
 
     const handleShowHideClick = useCallback(() => {
       dispatch({
diff --git a/packages/react-component-library/src/components/DatePicker/types.ts b/packages/react-component-library/src/components/DatePicker/types.ts
index 4c42f1658..b28a94aca 100644
--- a/packages/react-component-library/src/components/DatePicker/types.ts
+++ b/packages/react-component-library/src/components/DatePicker/types.ts
@@ -16,7 +16,6 @@ export const DATEPICKER_ACTION = {
   UPDATE: 'UPDATE',
   REFRESH_HAS_ERROR: 'REFRESH_HAS_ERROR',
   REFRESH_INPUT_VALUE: 'REFRESH_INPUT_VALUE',
-  TOGGLE_OPEN: 'TOGGLE_OPEN',
 } as const
 
 interface ResetAction {
@@ -39,11 +38,6 @@ interface RefreshInputValueAction {
   data?: never
 }
 
-interface ToggleOpenAction {
-  type: typeof DATEPICKER_ACTION.TOGGLE_OPEN
-  data?: never
-}
-
 export type DatePickerAction =
   | ResetAction
   | UpdateAction
diff --git a/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx b/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx
index e3461b8a1..0abfa3c4d 100644
--- a/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx
+++ b/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx
@@ -81,11 +81,6 @@ function reducer(
           state.datePickerFormat
         ),
       }
-    case DATEPICKER_ACTION.TOGGLE_OPEN:
-      return {
-        ...state,
-        isOpen: !state.isOpen,
-      }
     default:
       throw new Error('Unknown reducer action type')
   }
diff --git a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts
index 4f6d9bbed..0f5d7bc9d 100644
--- a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts
+++ b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts
@@ -19,10 +19,21 @@ export function useFocusTrapOptions(
     () => ({
       allowOutsideClick: (event) =>
         isEventTargetDescendantOf(event, clickAllowedElementRefs),
-      clickOutsideDeactivates: (event) =>
-        !isEventTargetDescendantOf(event, clickAllowedElementRefs),
+      clickOutsideDeactivates: (event) => {
+        const shouldDeactivate = !isEventTargetDescendantOf(
+          event,
+          clickAllowedElementRefs
+        )
+        if (shouldDeactivate) {
+          close()
+        }
+        return shouldDeactivate
+      },
+      escapeDeactivates: () => {
+        close()
+        return true
+      },
       initialFocus: false,
-      onDeactivate: close,
     }),
     [clickAllowedElementRefs, close]
   )