From c82c6345231670d3723cae4ebaa0d78954699b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Fri, 21 Oct 2022 10:35:59 +0200
Subject: [PATCH] Hide autocomplete when the input is blurred. (#6692)

---
 .../post_draft/draft_handler/draft_handler.tsx         |  3 +++
 app/components/post_draft/draft_input/index.tsx        |  3 +++
 app/components/post_draft/post_draft.tsx               |  6 ++++--
 app/components/post_draft/post_input/post_input.tsx    | 10 +++++++++-
 .../post_draft/send_handler/send_handler.tsx           |  3 +++
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/components/post_draft/draft_handler/draft_handler.tsx b/app/components/post_draft/draft_handler/draft_handler.tsx
index b74b230ca..f8505bc95 100644
--- a/app/components/post_draft/draft_handler/draft_handler.tsx
+++ b/app/components/post_draft/draft_handler/draft_handler.tsx
@@ -24,6 +24,7 @@ type Props = {
     updatePostInputTop: (top: number) => void;
     updateValue: (value: string) => void;
     value: string;
+    setIsFocused: (isFocused: boolean) => void;
 }
 
 const emptyFileList: FileInfo[] = [];
@@ -47,6 +48,7 @@ export default function DraftHandler(props: Props) {
         updatePostInputTop,
         updateValue,
         value,
+        setIsFocused,
     } = props;
 
     const serverUrl = useServerUrl();
@@ -144,6 +146,7 @@ export default function DraftHandler(props: Props) {
             updateCursorPosition={updateCursorPosition}
             updatePostInputTop={updatePostInputTop}
             updateValue={updateValue}
+            setIsFocused={setIsFocused}
         />
     );
 }
diff --git a/app/components/post_draft/draft_input/index.tsx b/app/components/post_draft/draft_input/index.tsx
index 6e3625371..536a99430 100644
--- a/app/components/post_draft/draft_input/index.tsx
+++ b/app/components/post_draft/draft_input/index.tsx
@@ -36,6 +36,7 @@ type Props = {
     updateValue: (value: string) => void;
     addFiles: (files: FileInfo[]) => void;
     updatePostInputTop: (top: number) => void;
+    setIsFocused: (isFocused: boolean) => void;
 }
 
 const SAFE_AREA_VIEW_EDGES: Edge[] = ['left', 'right'];
@@ -94,6 +95,7 @@ export default function DraftInput({
     updateCursorPosition,
     cursorPosition,
     updatePostInputTop,
+    setIsFocused,
 }: Props) {
     const theme = useTheme();
 
@@ -142,6 +144,7 @@ export default function DraftInput({
                         value={value}
                         addFiles={addFiles}
                         sendMessage={sendMessage}
+                        setIsFocused={setIsFocused}
                     />
                     <Uploads
                         currentUserId={currentUserId}
diff --git a/app/components/post_draft/post_draft.tsx b/app/components/post_draft/post_draft.tsx
index 950a7a67b..a4348a952 100644
--- a/app/components/post_draft/post_draft.tsx
+++ b/app/components/post_draft/post_draft.tsx
@@ -57,6 +57,7 @@ function PostDraft({
     const [value, setValue] = useState(message);
     const [cursorPosition, setCursorPosition] = useState(message.length);
     const [postInputTop, setPostInputTop] = useState(0);
+    const [isFocused, setIsFocused] = useState(false);
     const isTablet = useIsTablet();
     const keyboardHeight = useKeyboardHeight(keyboardTracker);
     const insets = useSafeAreaInsets();
@@ -110,10 +111,11 @@ function PostDraft({
             updatePostInputTop={setPostInputTop}
             updateValue={setValue}
             value={value}
+            setIsFocused={setIsFocused}
         />
     );
 
-    const autoComplete = (
+    const autoComplete = isFocused ? (
         <Autocomplete
             position={animatedAutocompletePosition}
             updateValue={setValue}
@@ -126,7 +128,7 @@ function PostDraft({
             inPost={true}
             availableSpace={animatedAutocompleteAvailableSpace}
         />
-    );
+    ) : null;
 
     if (Platform.OS === 'android') {
         return (
diff --git a/app/components/post_draft/post_input/post_input.tsx b/app/components/post_draft/post_input/post_input.tsx
index 3e3f31da2..2cf1997ac 100644
--- a/app/components/post_draft/post_input/post_input.tsx
+++ b/app/components/post_draft/post_input/post_input.tsx
@@ -39,6 +39,7 @@ type Props = {
     cursorPosition: number;
     updateCursorPosition: (pos: number) => void;
     sendMessage: () => void;
+    setIsFocused: (isFocused: boolean) => void;
 }
 
 const showPasteFilesErrorDialog = (intl: IntlShape) => {
@@ -108,6 +109,7 @@ export default function PostInput({
     cursorPosition,
     updateCursorPosition,
     sendMessage,
+    setIsFocused,
 }: Props) {
     const intl = useIntl();
     const isTablet = useIsTablet();
@@ -140,7 +142,12 @@ export default function PostInput({
 
     const onBlur = useCallback(() => {
         updateDraftMessage(serverUrl, channelId, rootId, value);
-    }, [channelId, rootId, value]);
+        setIsFocused(false);
+    }, [channelId, rootId, value, setIsFocused]);
+
+    const onFocus = useCallback(() => {
+        setIsFocused(true);
+    }, [setIsFocused]);
 
     const checkMessageLength = useCallback((newValue: string) => {
         const valueLength = newValue.trim().length;
@@ -308,6 +315,7 @@ export default function PostInput({
             placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
             multiline={true}
             onBlur={onBlur}
+            onFocus={onFocus}
             blurOnSubmit={false}
             underlineColorAndroid='transparent'
             keyboardType={keyboardType}
diff --git a/app/components/post_draft/send_handler/send_handler.tsx b/app/components/post_draft/send_handler/send_handler.tsx
index e2a318ddd..afa3a5f49 100644
--- a/app/components/post_draft/send_handler/send_handler.tsx
+++ b/app/components/post_draft/send_handler/send_handler.tsx
@@ -29,6 +29,7 @@ type Props = {
     testID?: string;
     channelId: string;
     rootId: string;
+    setIsFocused: (isFocused: boolean) => void;
 
     // From database
     currentUserId: string;
@@ -73,6 +74,7 @@ export default function SendHandler({
     uploadFileError,
     updateCursorPosition,
     updatePostInputTop,
+    setIsFocused,
 }: Props) {
     const intl = useIntl();
     const serverUrl = useServerUrl();
@@ -290,6 +292,7 @@ export default function SendHandler({
             canSend={canSend()}
             maxMessageLength={maxMessageLength}
             updatePostInputTop={updatePostInputTop}
+            setIsFocused={setIsFocused}
         />
     );
 }