diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index a93063565..727e75f79 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { da, de, fi, nb, sv } from "date-fns/locale"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 
 import { Lang } from "@/constants/languages"
@@ -37,38 +37,40 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     setIsOpen(false)
   }
 
-  function handleOnClick() {
-    setIsOpen((prevIsOpen) => !prevIsOpen)
+  function showOnFocus() {
+    setIsOpen(true)
   }
 
   function handleSelectDate(selected: Date) {
-    if (isSelectingFrom) {
-      setValue(name, {
-        fromDate: dt(selected).format("YYYY-MM-DD"),
-        toDate: undefined,
-      })
-      setIsSelectingFrom(false)
-    } else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
-      const fromDate = dt(selectedDate.fromDate)
-      const toDate = dt(selected)
-      if (toDate.isAfter(fromDate)) {
+    // Handle Enter key press on any other input fields trigger day click update
+    // Daypicker triggers onDayClick for a previous date on enter
+    if (!dt(selected).isBefore(dt(), "day")) {
+      if (isSelectingFrom) {
         setValue(name, {
-          fromDate: selectedDate.fromDate,
-          toDate: toDate.format("YYYY-MM-DD"),
-        })
-      } else {
-        setValue(name, {
-          fromDate: toDate.format("YYYY-MM-DD"),
-          toDate: selectedDate.fromDate,
+          fromDate: dt(selected).format("YYYY-MM-DD"),
+          toDate: undefined,
         })
+        setIsSelectingFrom(false)
+      } else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
+        const fromDate = dt(selectedDate.fromDate)
+        const toDate = dt(selected)
+        if (toDate.isAfter(fromDate)) {
+          setValue(name, {
+            fromDate: selectedDate.fromDate,
+            toDate: toDate.format("YYYY-MM-DD"),
+          })
+        } else {
+          setValue(name, {
+            fromDate: toDate.format("YYYY-MM-DD"),
+            toDate: selectedDate.fromDate,
+          })
+        }
+        setIsSelectingFrom(true)
       }
-      setIsSelectingFrom(true)
     }
   }
-
-  useEffect(() => {
-    function handleClickOutside(evt: Event) {
-      const target = evt.target as HTMLElement
+  const closeIfOutside = useCallback(
+    (target: HTMLElement) => {
       if (ref.current && target && !ref.current.contains(target)) {
         if (!selectedDate.toDate) {
           setValue(name, {
@@ -77,15 +79,29 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
               .add(1, "day")
               .format("YYYY-MM-DD"),
           })
+          setIsSelectingFrom(true)
         }
         setIsOpen(false)
       }
+    },
+    [setIsOpen, setValue, setIsSelectingFrom, selectedDate, name]
+  )
+
+  function closeOnBlur(evt: FocusEvent) {
+    const target = evt.relatedTarget as HTMLElement
+    closeIfOutside(target)
+  }
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      closeIfOutside(target)
     }
     document.body.addEventListener("click", handleClickOutside)
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen, setValue, selectedDate, name])
+  }, [closeIfOutside])
 
   const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)
@@ -95,8 +111,15 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     : ""
 
   return (
-    <div className={styles.container} data-isopen={isOpen} ref={ref}>
-      <button className={styles.btn} onClick={handleOnClick} type="button">
+    <div
+      className={styles.container}
+      onBlur={(e) => {
+        closeOnBlur(e.nativeEvent)
+      }}
+      data-isopen={isOpen}
+      ref={ref}
+    >
+      <button className={styles.btn} onFocus={showOnFocus} type="button">
         <Body className={styles.body} asChild>
           <span>
             {selectedFromDate} - {selectedToDate}