LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix mentioning with enter (#691)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/commentCreate/view.jsx
View file

@ -350,12 +350,16 @@ export function CommentCreate(props: Props) {
if (inputRef && inputRef.current === document.activeElement) { if (inputRef && inputRef.current === document.activeElement) {
// $FlowFixMe // $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) { if (((isLivestream && !isTyping) || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
e.preventDefault(); e.preventDefault();
buttonRef.current.click(); buttonRef.current.click();
} }
if (isLivestream && isTyping && e.keyCode === KEYCODES.ENTER) {
inputRef.current.removeAttribute('typing-term');
}
} }
} }

21
ui/component/textareaWithSuggestions/view.jsx
View file

@ -231,6 +231,7 @@ export default function TextareaWithSuggestions(props: Props) {
const token = isEmote ? ':' : '@'; const token = isEmote ? ':' : '@';
const tokenIndex = currentSuggestionValue.indexOf(token); const tokenIndex = currentSuggestionValue.indexOf(token);
if (inputRef && inputRef.current) inputRef.current.setAttribute('typing-term', '');
// $FlowFixMe // $FlowFixMe
setSuggestionValue({ setSuggestionValue({
beforeTerm: currentSuggestionValue.substring(0, tokenIndex), // in case of a space or newline 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( const handleSelect = React.useCallback(
(selectedValue: string) => { (selectedValue: string, key?: number) => {
if (!suggestionValue) return; if (!suggestionValue) return;
const elem = inputRef && inputRef.current; const elem = inputRef && inputRef.current;
@ -262,6 +263,11 @@ export default function TextareaWithSuggestions(props: Props) {
onChange({ target: { value: newValue } }); onChange({ target: { value: newValue } });
setSuggestionValue(null); 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.focus();
elem.setSelectionRange(newCursorPos, newCursorPos); elem.setSelectionRange(newCursorPos, newCursorPos);
}, },
@ -294,17 +300,6 @@ export default function TextareaWithSuggestions(props: Props) {
} }
}, [debouncedTerm, doResolveUris, doSetMentionSearchResults, stringifiedResults, suggestionTerm]); }, [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 // Only resolve commentors on Livestreams when first trying to mention/looking for it
React.useEffect(() => { React.useEffect(() => {
if (isLivestream && commentorUris && suggestionTerm) doResolveUris(commentorUris); if (isLivestream && commentorUris && suggestionTerm) doResolveUris(commentorUris);
@ -382,7 +377,7 @@ export default function TextareaWithSuggestions(props: Props) {
onBlur={() => onBlur && onBlur()} onBlur={() => onBlur && onBlur()}
/* Different from onInputChange, onChange is only used for the selected value, /* 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) */ 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)} onClose={(event, reason) => reason !== 'selectOption' && setClose(true)}
onFocus={() => onFocus && onFocus()} onFocus={() => onFocus && onFocus()}
onHighlightChange={(event, option) => setHighlightedSuggestion(option)} onHighlightChange={(event, option) => setHighlightedSuggestion(option)}