fix blue border around year

Expensify · Nov 5, 2024 · a7aa316 · a7aa316
1 parent 10454f0
commit a7aa316
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -1,6 +1,6 @@
 import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import {Str} from 'expensify-common';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -51,6 +51,7 @@ function CalendarPicker({
     const themeStyles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {preferredLocale, translate} = useLocalize();
+    const pressableRef = useRef<View>(null);
 
     const [currentDateView, setCurrentDateView] = useState(getInitialCurrentDateView(value, minDate, maxDate));
 
@@ -148,7 +149,11 @@ function CalendarPicker({
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
                 <PressableWithFeedback
-                    onPress={() => setIsYearPickerVisible(true)}
+                    onPress={() => {
+                        pressableRef?.current?.blur();
+                        setIsYearPickerVisible(true);
+                    }}
+                    ref={pressableRef}
                     style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentStart]}
                     wrapperStyle={[themeStyles.alignItemsCenter]}
                     hoverDimmingValue={1}