autocomplete_view: fix cursor placement

src/autocomplete/AutocompleteView.js

@@ -29,17 +29,26 @@ type Props = $ReadOnly<{|
       but not the prefix. Eg. **FullName**, **StreamName**.
    * @param lastWordPrefix The type of the autocompletion - valid values are keys of 'prefixToComponent'.
    */
-  onAutocomplete: (input: string, completion: string, lastWordPrefix: string) => void,
+  onAutocomplete: (
+    input: string,
+    completion: string,
+    lastWordPrefix: string,
+    selection: InputSelection,
+  ) => void,
 |}>;
 
 export default function AutocompleteView(props: Props): Node {
   const { isFocused, text, onAutocomplete, selection } = props;
 
   const handleAutocomplete = useCallback(
     (autocomplete: string) => {
-      const { lastWordPrefix } = getAutocompleteFilter(text, selection);
+      const { lastWordPrefix, filter } = getAutocompleteFilter(text, selection);
       const newText = getAutocompletedText(text, autocomplete, selection);
-      onAutocomplete(newText, autocomplete, lastWordPrefix);
+      const finalPosition = selection.start - filter.length + autocomplete.length + 1;
+      onAutocomplete(newText, autocomplete, lastWordPrefix, {
+        start: finalPosition,
+        end: finalPosition,
+      });
     },
     [onAutocomplete, selection, text],
   );

src/common/Input.js

@@ -47,7 +47,7 @@ const componentStyles = createStyleSheet({
  *   See upstream: https://reactnative.dev/docs/textinput
  */
 export default function Input(props: Props): Node {
-  const { style, placeholder, textInputRef, ...restProps } = props;
+  const { style, placeholder, textInputRef, selection, ...restProps } = props;
 
   const [isFocused, setIsFocused] = useState<boolean>(false);
 
@@ -76,6 +76,7 @@ export default function Input(props: Props): Node {
       onFocus={handleFocus}
       onBlur={handleBlur}
       ref={textInputRef}
+      selection={selection}
       {...restProps}
     />
   );

src/compose/ComposeBox.js

@@ -329,6 +329,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     completedText: string,
     completion: string,
     lastWordPrefix: string,
+    selection: InputSelection,
   ) => {
     this.setMessageInputValue(completedText);
 
@@ -337,6 +338,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
       // eslint-disable-next-line no-unused-expressions
       this.mentionWarnings.current?.handleMentionSubscribedCheck(completion);
     }
+    this.setState({ selection });
   };
 
   handleMessageSelectionChange = (event: {
@@ -638,6 +640,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
               onBlur={this.handleMessageBlur}
               onChangeText={this.handleMessageChange}
               onFocus={this.handleMessageFocus}
+              selection={selection}
               onSelectionChange={this.handleMessageSelectionChange}
               onTouchStart={this.handleInputTouchStart}
             />