Hide autocomplete when the input is blurred. (#6692)

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}
         />
     );
 }

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}

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 (

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}

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}
         />
     );
 }