Fix missing ref to textarea

app/javascript/mastodon/components/autosuggest_textarea.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useCallback, useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useState, useEffect, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
@@ -37,7 +37,7 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
   }
 };
 
-const AutosuggestTextarea = ({
+const AutosuggestTextarea = forwardRef(({
   value,
   suggestions,
   disabled,
@@ -53,7 +53,7 @@ const AutosuggestTextarea = ({
   autoFocus = true,
   lang,
   children,
-}) => {
+}, textareaRef) => {
 
   const [suggestionsHidden, setSuggestionsHidden] = useState(true);
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
@@ -61,7 +61,6 @@ const AutosuggestTextarea = ({
   const focusedRef = useRef(false);
   const lastTokenRef = useRef(null);
   const tokenStartRef = useRef(0);
-  const textareaRef = useRef(null);
 
   const handleChange = useCallback((e) => {
     const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
@@ -151,7 +150,7 @@ const AutosuggestTextarea = ({
     e.preventDefault();
     onSuggestionSelected(tokenStartRef.current, lastTokenRef.current, suggestion);
     textareaRef.current?.focus();
-  }, [suggestions, onSuggestionSelected]);
+  }, [suggestions, onSuggestionSelected, textareaRef]);
 
   const handlePaste = useCallback((e) => {
     if (e.clipboardData && e.clipboardData.files.length === 1) {
@@ -223,7 +222,7 @@ const AutosuggestTextarea = ({
       </div>
     </div>,
   ];
-};
+});
 
 AutosuggestTextarea.propTypes = {
   value: PropTypes.string,
@@ -237,6 +236,8 @@ AutosuggestTextarea.propTypes = {
   onKeyUp: PropTypes.func,
   onKeyDown: PropTypes.func,
   onPaste: PropTypes.func.isRequired,
+  onFocus:PropTypes.func,
+  children: PropTypes.node,
   autoFocus: PropTypes.bool,
   lang: PropTypes.string,
 };

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -102,10 +102,10 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   handleSubmit = (e) => {
-    if (this.props.text !== this.autosuggestTextarea.textarea.value) {
+    if (this.props.text !== this.autosuggestTextarea.value) {
       // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
       // Update the state to match the current text
-      this.props.onChange(this.autosuggestTextarea.textarea.value);
+      this.props.onChange(this.autosuggestTextarea.value);
     }
 
     if (!this.canSubmit()) {
@@ -184,18 +184,18 @@ class ComposeForm extends ImmutablePureComponent {
       // immediately selectable, we have to wait for observers to run, as
       // described in https://github.com/WICG/inert#performance-and-gotchas
       Promise.resolve().then(() => {
-        this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
-        this.autosuggestTextarea.textarea.focus();
+        this.autosuggestTextarea.setSelectionRange(selectionStart, selectionEnd);
+        this.autosuggestTextarea.focus();
         this.setState({ highlighted: true });
         this.timeout = setTimeout(() => this.setState({ highlighted: false }), 700);
       }).catch(console.error);
     } else if(prevProps.isSubmitting && !this.props.isSubmitting) {
-      this.autosuggestTextarea.textarea.focus();
+      this.autosuggestTextarea.focus();
     } else if (this.props.spoiler !== prevProps.spoiler) {
       if (this.props.spoiler) {
         this.spoilerText.input.focus();
       } else if (prevProps.spoiler) {
-        this.autosuggestTextarea.textarea.focus();
+        this.autosuggestTextarea.focus();
       }
     }
   };
@@ -214,7 +214,7 @@ class ComposeForm extends ImmutablePureComponent {
 
   handleEmojiPick = (data) => {
     const { text }     = this.props;
-    const position     = this.autosuggestTextarea.textarea.selectionStart;
+    const position     = this.textarea.selectionStart;
     const needsSpace   = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
     this.props.onPickEmoji(position, data, needsSpace);