From b1e2d832cca5060c4369b247473e80431569a29a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 22 Jul 2024 13:32:12 +0700
Subject: [PATCH] prevent focus on confirm button

---
 src/components/MoneyRequestConfirmationList.tsx          | 9 +++++----
 src/libs/Accessibility/blurActiveElement/index.native.ts | 3 +++
 src/libs/Accessibility/blurActiveElement/index.ts        | 8 ++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 src/libs/Accessibility/blurActiveElement/index.native.ts
 create mode 100644 src/libs/Accessibility/blurActiveElement/index.ts

diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
index ab62febbf950..ce577c5d1170 100755
--- a/src/components/MoneyRequestConfirmationList.tsx
+++ b/src/components/MoneyRequestConfirmationList.tsx
@@ -1,7 +1,7 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -11,6 +11,7 @@ import {MouseProvider} from '@hooks/useMouseContext';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import type {MileageRate} from '@libs/DistanceRequestUtils';
@@ -740,11 +741,12 @@ function MoneyRequestConfirmationList({
     );
 
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const confirmButtonRef = useRef<View>(null);
     useFocusEffect(
         useCallback(() => {
             focusTimeoutRef.current = setTimeout(() => {
-                confirmButtonRef.current?.focus();
+                InteractionManager.runAfterInteractions(() => {
+                    blurActiveElement();
+                });
             }, CONST.ANIMATED_TRANSITION);
             return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
         }, []),
@@ -782,7 +784,6 @@ function MoneyRequestConfirmationList({
             />
         ) : (
             <ButtonWithDropdownMenu
-                buttonRef={confirmButtonRef}
                 success
                 pressOnEnter
                 isDisabled={shouldDisableButton}
diff --git a/src/libs/Accessibility/blurActiveElement/index.native.ts b/src/libs/Accessibility/blurActiveElement/index.native.ts
new file mode 100644
index 000000000000..fe84de5dd2bd
--- /dev/null
+++ b/src/libs/Accessibility/blurActiveElement/index.native.ts
@@ -0,0 +1,3 @@
+const blurActiveElement = () => {};
+
+export default blurActiveElement;
diff --git a/src/libs/Accessibility/blurActiveElement/index.ts b/src/libs/Accessibility/blurActiveElement/index.ts
new file mode 100644
index 000000000000..71040ea24623
--- /dev/null
+++ b/src/libs/Accessibility/blurActiveElement/index.ts
@@ -0,0 +1,8 @@
+const blurActiveElement = () => {
+    if (!(document.activeElement instanceof HTMLElement)) {
+        return;
+    }
+    document.activeElement.blur();
+};
+
+export default blurActiveElement;