Fix mentioning with enter (#691)

This commit is contained in:
saltrafael 2022-01-13 15:36:07 -03:00 committed by GitHub
parent 4ae1df4eb9
commit e1bbd9984a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 14 deletions

View file

@ -350,12 +350,16 @@ export function CommentCreate(props: Props) {
if (inputRef && inputRef.current === document.activeElement) {
// $FlowFixMe
const isTyping = e.target.attributes['term'];
const isTyping = Boolean(e.target.attributes['typing-term']);
if (((isLivestream && !isTyping) || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
e.preventDefault();
buttonRef.current.click();
}
if (isLivestream && isTyping && e.keyCode === KEYCODES.ENTER) {
inputRef.current.removeAttribute('typing-term');
}
}
}

View file

@ -231,6 +231,7 @@ export default function TextareaWithSuggestions(props: Props) {
const token = isEmote ? ':' : '@';
const tokenIndex = currentSuggestionValue.indexOf(token);
if (inputRef && inputRef.current) inputRef.current.setAttribute('typing-term', '');
// $FlowFixMe
setSuggestionValue({
beforeTerm: currentSuggestionValue.substring(0, tokenIndex), // in case of a space or newline
@ -245,7 +246,7 @@ export default function TextareaWithSuggestions(props: Props) {
}
const handleSelect = React.useCallback(
(selectedValue: string) => {
(selectedValue: string, key?: number) => {
if (!suggestionValue) return;
const elem = inputRef && inputRef.current;
@ -262,6 +263,11 @@ export default function TextareaWithSuggestions(props: Props) {
onChange({ target: { value: newValue } });
setSuggestionValue(null);
// no keycode === was selected with TAB (function was called by effect) or on click
// ENTER is handled on commentCreate after attempting to send on livestream
if (!key && inputRef && inputRef.current) inputRef.current.removeAttribute('typing-term');
elem.focus();
elem.setSelectionRange(newCursorPos, newCursorPos);
},
@ -294,17 +300,6 @@ export default function TextareaWithSuggestions(props: Props) {
}
}, [debouncedTerm, doResolveUris, doSetMentionSearchResults, stringifiedResults, suggestionTerm]);
// Disable sending on Enter on Livestream chat
React.useEffect(() => {
if (!isLivestream) return;
if (suggestionTerm && inputRef) {
inputRef.current.setAttribute('term', suggestionTerm);
} else {
inputRef.current.removeAttribute('term');
}
}, [inputRef, isLivestream, suggestionTerm]);
// Only resolve commentors on Livestreams when first trying to mention/looking for it
React.useEffect(() => {
if (isLivestream && commentorUris && suggestionTerm) doResolveUris(commentorUris);
@ -382,7 +377,7 @@ export default function TextareaWithSuggestions(props: Props) {
onBlur={() => onBlur && onBlur()}
/* Different from onInputChange, onChange is only used for the selected value,
so here it is acting simply as a selection handler (see it as onSelect) */
onChange={(event, value) => handleSelect(value.label)}
onChange={(event, value) => handleSelect(value.label, event.keyCode)}
onClose={(event, reason) => reason !== 'selectOption' && setClose(true)}
onFocus={() => onFocus && onFocus()}
onHighlightChange={(event, option) => setHighlightedSuggestion(option)}