diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index 23cefa9be0d..c0b38a9211c 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -85,7 +85,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
   };
 
   const ref = createRef<HTMLElement>();
-  const { overlayProps } = useOverlay({ onClose, isOpen }, ref);
+  const { overlayProps } = useOverlay({ onClose, isDismissable: true, isOpen }, ref);
 
   const styles = getStyles(theme);
   const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
index 55fcefa475a..d08d072a3bc 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx
@@ -76,9 +76,16 @@ const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopP
 function TimePickerCalendar(props: TimePickerCalendarProps) {
   const theme = useTheme2();
   const styles = getStyles(theme, props.isReversed);
-  const { isOpen, isFullscreen } = props;
+  const { isOpen, isFullscreen, onClose } = props;
   const ref = React.createRef<HTMLElement>();
-  const { overlayProps } = useOverlay(props, ref);
+  const { overlayProps } = useOverlay(
+    {
+      isDismissable: true,
+      isOpen,
+      onClose,
+    },
+    ref
+  );
 
   if (!isOpen) {
     return null;