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(
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) {

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}
toggleSelectors={
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
}
handleTip={handleTip}
@ -328,7 +332,7 @@ export class FormField extends React.PureComponent<Props, State> {
handlePreventClick={
!this.state.drawerOpen ? () => this.setState({ drawerOpen: true }) : undefined
}
autoFocus={this.state.drawerOpen}
autoFocus={this.state.drawerOpen && (!showSelectors || !showSelectors.open)}
submitButtonRef={submitButtonRef}
/>
</React.Suspense>

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

@ -308,7 +308,9 @@ export default function TextareaWithSuggestions(props: Props) {
inputElement.focus();
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(() => {
if (!isMention) return;