From 8cab26a9e1b04bac809653d9ed43ef1a4eedd8c6 Mon Sep 17 00:00:00 2001
From: Sadaqat Ali <48380998+aliseyalvi@users.noreply.github.com>
Date: Tue, 18 Oct 2022 23:13:51 +0500
Subject: [PATCH] fixed focus bug when editor opened and closed instantly

---
 .../view/markdownEditorView.tsx               | 143 +++++++++---------
 1 file changed, 70 insertions(+), 73 deletions(-)

diff --git a/src/components/markdownEditor/view/markdownEditorView.tsx b/src/components/markdownEditor/view/markdownEditorView.tsx
index 82bf71cdf..fa0035524 100644
--- a/src/components/markdownEditor/view/markdownEditorView.tsx
+++ b/src/components/markdownEditor/view/markdownEditorView.tsx
@@ -48,9 +48,9 @@ import { EditorToolbar } from '../children/editorToolbar';
 import { extractImageUrls } from '../../../utils/editor';
 import { useAppSelector } from '../../../hooks';
 
-const MIN_BODY_INPUT_HEIGHT = 300;
+// const MIN_BODY_INPUT_HEIGHT = 300;
 
-//These variable keep track of body text input state, 
+//These variable keep track of body text input state,
 //this helps keep load on minimal compared to both useState and useRef;
 var bodyText = '';
 var bodySelection = { start: 0, end: 0 };
@@ -74,24 +74,23 @@ const MarkdownEditorView = ({
   autoFocusText,
   sharedSnippetText,
   onLoadDraftPress,
-  setIsUploading
+  setIsUploading,
 }) => {
   const dispatch = useDispatch();
 
-  const isDarkTheme = useAppSelector(state => state.application.isDarkTheme);
+  const isDarkTheme = useAppSelector((state) => state.application.isDarkTheme);
 
   const [editable, setEditable] = useState(true);
-  const [bodyInputHeight, setBodyInputHeight] = useState(MIN_BODY_INPUT_HEIGHT);
+  // const [bodyInputHeight, setBodyInputHeight] = useState(MIN_BODY_INPUT_HEIGHT);
   const [isSnippetsOpen, setIsSnippetsOpen] = useState(false);
   const [showDraftLoadButton, setShowDraftLoadButton] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [insertedMediaUrls, setInsertedMediaUrls] = useState([]);
 
-
-  const inputRef = useRef(null);
-  const clearRef = useRef(null);
-  const insertLinkModalRef = useRef(null);
-  const tooltipRef = useRef(null);
+  const inputRef = useRef<any>(null);
+  const clearRef = useRef<any>(null);
+  const insertLinkModalRef = useRef<any>(null);
+  const tooltipRef = useRef<any>(null);
 
   const isVisibleAccountsBottomSheet = useSelector(
     (state) => state.ui.isVisibleAccountsBottomSheet,
@@ -164,7 +163,6 @@ const MarkdownEditorView = ({
     }
   }, [isLoading]);
 
-
   useEffect(() => {
     bodyText = draftBody;
   }, [draftBody]);
@@ -173,13 +171,11 @@ const MarkdownEditorView = ({
     if (isReply || (autoFocusText && inputRef && inputRef.current && draftBtnTooltipRegistered)) {
       // added delay to open keyboard, solves the issue of keyboard not opening
       setTimeout(() => {
-        inputRef.current.focus();
+        inputRef?.current?.focus();
       }, 1000);
     }
   }, [autoFocusText]);
 
-
-
   const changeUser = async () => {
     dispatch(toggleAccountsBottomSheet(!isVisibleAccountsBottomSheet));
   };
@@ -193,33 +189,37 @@ const MarkdownEditorView = ({
     });
   };
 
-
-  const _debouncedOnTextChange = useCallback(debounce(() => {
-    console.log("setting is editing to", false)
-    setIsEditing(false)
-    const urls = extractImageUrls({ body: bodyText })
-    if (urls.length !== insertedMediaUrls.length) {
-      setInsertedMediaUrls(urls);
-    }
-  }, 500), [])
+  const _debouncedOnTextChange = useCallback(
+    debounce(() => {
+      console.log('setting is editing to', false);
+      setIsEditing(false);
+      const urls = extractImageUrls({ body: bodyText });
+      if (urls.length !== insertedMediaUrls.length) {
+        setInsertedMediaUrls(urls);
+      }
+    }, 500),
+    [],
+  );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const _changeText = useCallback((input) => {
-    bodyText = input;
+  const _changeText = useCallback(
+    (input) => {
+      bodyText = input;
 
-    if (!isEditing) {
-      console.log('force setting is editing to true', true)
-      setIsEditing(true)
-    }
+      if (!isEditing) {
+        console.log('force setting is editing to true', true);
+        setIsEditing(true);
+      }
 
-    _debouncedOnTextChange();
-
-    //NOTE: onChange method is called by direct parent of MarkdownEditor that is PostForm, do not remove
-    if (onChange) {
-      onChange(input);
-    }
-  }, [isEditing]);
+      _debouncedOnTextChange();
 
+      //NOTE: onChange method is called by direct parent of MarkdownEditor that is PostForm, do not remove
+      if (onChange) {
+        onChange(input);
+      }
+    },
+    [isEditing],
+  );
 
   const _handleOnSelectionChange = async (event) => {
     bodySelection = event.nativeEvent.selection;
@@ -233,11 +233,11 @@ const MarkdownEditorView = ({
     });
 
     const _updateSelection = () => {
-      bodySelection = _selection
+      bodySelection = _selection;
       inputRef?.current?.setNativeProps({
         selection: _selection,
       });
-    }
+    };
 
     // Workaround for iOS selection update issue
     if (Platform.OS === 'ios') {
@@ -245,7 +245,7 @@ const MarkdownEditorView = ({
         _updateSelection();
       }, 100);
     } else {
-      _updateSelection()
+      _updateSelection();
     }
 
     if (isSnippetsOpen) {
@@ -275,8 +275,6 @@ const MarkdownEditorView = ({
     setIsSnippetsOpen(false);
   };
 
-
-
   const _handleMediaInsert = (mediaArray: MediaInsertData[]) => {
     if (mediaArray.length) {
       applyMediaLink({
@@ -288,19 +286,16 @@ const MarkdownEditorView = ({
     }
   };
 
-
-
-
   const _handleOnAddLinkPress = () => {
     insertLinkModalRef.current?.showModal({
       selectedText: bodyText.slice(bodySelection.start, bodySelection.end),
       selection: bodySelection,
     });
-    inputRef.current?.blur();
+    inputRef?.current?.blur();
   };
 
   const _handleOnAddLinkSheetClose = () => {
-    inputRef.current?.focus();
+    inputRef?.current?.focus();
   };
 
   const _handleInsertLink = ({ snippetText, selection }) => {
@@ -314,7 +309,6 @@ const MarkdownEditorView = ({
     insertLinkModalRef.current?.hideModal();
   };
 
-
   const _renderFloatingDraftButton = () => {
     if (showDraftLoadButton) {
       const _onPress = () => {
@@ -354,7 +348,7 @@ const MarkdownEditorView = ({
       _setTextAndSelection({ text: '', selection: { start: 0, end: 0 } });
     }
   };
-  const _renderEditor = (editorScrollEnabled:boolean) => (
+  const _renderEditor = (editorScrollEnabled: boolean) => (
     <>
       {isReply && !isEdit && <SummaryArea summary={headerText} />}
       {!isReply && (
@@ -397,38 +391,44 @@ const MarkdownEditorView = ({
         </View>
       )}
       {!isPreviewActive ? (
-            <TextInput
-              multiline
-              autoCorrect={true}
-              autoFocus={!draftBtnTooltipRegistered ? false : true}
-              onChangeText={_changeText}
-              onSelectionChange={_handleOnSelectionChange}
-              placeholder={intl.formatMessage({
-                id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
-              })}
-              placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
-              selectionColor="#357ce6"
-              style={styles.textWrapper}
-              underlineColorAndroid="transparent"
-              innerRef={inputRef}
-              editable={editable}
-              contextMenuHidden={false}
-              scrollEnabled={editorScrollEnabled}
-            />
+        <TextInput
+          multiline
+          autoCorrect={true}
+          autoFocus={!draftBtnTooltipRegistered ? false : true}
+          onChangeText={_changeText}
+          onSelectionChange={_handleOnSelectionChange}
+          placeholder={intl.formatMessage({
+            id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
+          })}
+          placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
+          selectionColor="#357ce6"
+          style={styles.textWrapper}
+          underlineColorAndroid="transparent"
+          innerRef={inputRef}
+          editable={editable}
+          contextMenuHidden={false}
+          scrollEnabled={editorScrollEnabled}
+        />
       ) : (
         _renderPreview()
       )}
     </>
   );
 
-  const _editorWithScroll = <ScrollView style={styles.container}>{_renderEditor(false)}</ScrollView>;
+  const _editorWithScroll = (
+    <ScrollView style={styles.container}>{_renderEditor(false)}</ScrollView>
+  );
   const _editorWithoutScroll = <View style={styles.container}>{_renderEditor(true)}</View>;
 
   const _renderContent = () => {
     const _innerContent = (
       <>
         {isAndroidOreo() ? _editorWithoutScroll : _editorWithScroll}
-        <UsernameAutofillBar text={bodyText} selection={bodySelection} onApplyUsername={_onApplyUsername} />
+        <UsernameAutofillBar
+          text={bodyText}
+          selection={bodySelection}
+          onApplyUsername={_onApplyUsername}
+        />
         {_renderFloatingDraftButton()}
 
         <EditorToolbar
@@ -445,11 +445,10 @@ const MarkdownEditorView = ({
               text: bodyText,
               selection: bodySelection,
               setTextAndSelection: _setTextAndSelection,
-              item
-            })
+              item,
+            });
           }}
         />
-
       </>
     );
 
@@ -480,8 +479,6 @@ const MarkdownEditorView = ({
         <SnippetsModal handleOnSelect={_handleOnSnippetReceived} />
       </Modal>
 
-
-
       <InsertLinkModal
         ref={insertLinkModalRef}
         handleOnInsertLink={_handleInsertLink}