From 51180e67e058d7365605224f8aa165e43ba4e927 Mon Sep 17 00:00:00 2001
From: Arkadiy Stepanov <arst@equinor.com>
Date: Thu, 31 Oct 2024 10:30:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Datepicker=20doesn't=20focus=20o?=
 =?UTF-8?q?n=20today's=20cell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Datepicker/calendars/CalendarCell.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx b/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx
index 2416dae949..1718b4d215 100644
--- a/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx
+++ b/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx
@@ -14,6 +14,7 @@ const StyledCell = styled(Typography)<{
   $highlight: Selections
   $disabled: boolean
   $density: 'compact' | 'comfortable'
+  $focused: boolean
 }>`
   display: flex;
   justify-content: center;
@@ -22,9 +23,8 @@ const StyledCell = styled(Typography)<{
   &:hover {
     background-color: ${tokens.colors.interactive.table__cell__fill_hover.rgba};
   }
-  &:focus {
-    outline: 2px dashed rgba(0, 112, 121, 1);
-  }
+
+  ${({ $focused }) => $focused && `outline: 2px dashed rgba(0, 112, 121, 1);`}
 
   ${({ $selected }) =>
     $selected &&
@@ -105,6 +105,7 @@ export function CalendarCell({
     isDisabled,
     isUnavailable,
     formattedDate,
+    isFocused,
   } = useCalendarCell({ date }, state, ref)
 
   /**
@@ -157,6 +158,7 @@ export function CalendarCell({
         $highlight={isHighlight}
         $disabled={isDisabled || isUnavailable}
         $density={density}
+        $focused={isFocused}
       >
         {formattedDate}
       </StyledCell>