Fix missing ref to textarea
This commit is contained in:
parent
d6a0b54e19
commit
bf0a87893a
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue