From 8c867c639f1314fa6c94d9b566bc1a0b579badcb Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Mon, 26 Aug 2024 13:11:10 +0200
Subject: [PATCH 1/2] add overlay

---
 .../TransparentOverlay/TransparentOverlay.tsx         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
index c2081fa33bd1..7db55652914a 100644
--- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
+++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import type {PointerEvent} from 'react-native';
 import type PressableProps from '@components/Pressable/GenericPressable/types';
@@ -29,6 +29,13 @@ function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
         e?.preventDefault();
     }, []);
 
+    const overlay = useMemo(
+        () => ({
+            backgroundColor: 'rgba(0, 0, 0, 0.005)',
+        }),
+        [],
+    );
+
     return (
         <View
             onPointerDown={handlePointerDown}
@@ -36,7 +43,7 @@ function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
         >
             <PressableWithoutFeedback
                 onPress={onPress}
-                style={[styles.flex1, styles.cursorDefault]}
+                style={[styles.flex1, styles.cursorDefault, overlay]}
                 accessibilityLabel={translate('common.close')}
                 role={CONST.ROLE.BUTTON}
             />

From 2c70f67810fa814efcf507912348671971669e96 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Fri, 30 Aug 2024 16:53:21 +0200
Subject: [PATCH 2/2] comment

---
 .../TransparentOverlay/TransparentOverlay.tsx                   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
index 7db55652914a..86126d1827fa 100644
--- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
+++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx
@@ -29,6 +29,8 @@ function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
         e?.preventDefault();
     }, []);
 
+    // The overlay is a semi-transparent layer that covers the entire screen and is used to close a modal when clicked.
+    // The touch event passes through the transparent overlay to the elements underneath, so we need to prevent that by adding a nearly invisible background color to the overlay.
     const overlay = useMemo(
         () => ({
             backgroundColor: 'rgba(0, 0, 0, 0.005)',