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

Fix commentCreate focus and blur issues

Browse source
This commit is contained in:
Rafael 2022-02-09 15:26:43 -03:00 committed by Thomas Zarebczan
parent 63cc5da092
commit 5c028fea7f
3 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -156,9 +156,6 @@ export function CommentCreate(props: Props) {
setCommentValue( setCommentValue(
commentValue + (commentValue && commentValue.charAt(commentValue.length - 1) !== ' ' ? ` ${emote} ` : `${emote} `) commentValue + (commentValue && commentValue.charAt(commentValue.length - 1) !== ' ' ? ` ${emote} ` : `${emote} `)
); );
const inputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input && formFieldRef.current.input;
if (inputRef && inputRef.current) inputRef.current.focus();
} }
function handleSelectTipComment(tab: string) { function handleSelectTipComment(tab: string) {

8
ui/component/common/form-components/form-field.jsx
View file

@ -313,7 +313,11 @@ export class FormField extends React.PureComponent<Props, State> {
isLivestream={isLivestream} isLivestream={isLivestream}
toggleSelectors={ toggleSelectors={
setShowSelectors && showSelectors setShowSelectors && showSelectors
? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: !showSelectors.open }) ? () => {
const input = this.input.current;
if (!showSelectors.open && input) input.blur();
setShowSelectors({ tab: showSelectors.tab || undefined, open: !showSelectors.open });
}
: undefined : undefined
} }
handleTip={handleTip} handleTip={handleTip}
@ -328,7 +332,7 @@ export class FormField extends React.PureComponent<Props, State> {
handlePreventClick={ handlePreventClick={
!this.state.drawerOpen ? () => this.setState({ drawerOpen: true }) : undefined !this.state.drawerOpen ? () => this.setState({ drawerOpen: true }) : undefined
} }
autoFocus={this.state.drawerOpen} autoFocus={this.state.drawerOpen && (!showSelectors || !showSelectors.open)}
submitButtonRef={submitButtonRef} submitButtonRef={submitButtonRef}
/> />
</React.Suspense> </React.Suspense>

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

@ -308,7 +308,9 @@ export default function TextareaWithSuggestions(props: Props) {
inputElement.focus(); inputElement.focus();
if (messageValue) inputElement.setSelectionRange(messageValue.length, messageValue.length); if (messageValue) inputElement.setSelectionRange(messageValue.length, messageValue.length);
} }
}, [autoFocus, inputRef, messageValue]); // do NOT listen to messageValue change, otherwise will autofocus while typing
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [autoFocus, inputRef]);
React.useEffect(() => { React.useEffect(() => {
if (!isMention) return; if (!isMention) return;