Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed reply box redrawing when clicking the button again

Browse source 
refs https://github.com/TryGhost/Team/issues/1710

Was caused by: mouseDown triggered on Reply button -> editor blurred -> editor closed itself -> onClick on reply opened the form again
This commit is contained in:
Simon Backx 2022-07-22 17:38:28 +02:00
parent 3fbb7a6c24
commit 2e7055622e
3 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/comments-ui/src/components/Comment.js
View file

@ -17,10 +17,18 @@ const Comment = (props) => {
setIsInEditMode(current => !current); setIsInEditMode(current => !current);
}; };
const closeEditMode = () => {
setIsInEditMode(false);
};
const toggleReplyMode = () => { const toggleReplyMode = () => {
setIsInReplyMode(current => !current); setIsInReplyMode(current => !current);
}; };
const closeReplyMode = () => {
setIsInReplyMode(false);
};
const {admin, avatarSaturation, member, commentsEnabled} = useContext(AppContext); const {admin, avatarSaturation, member, commentsEnabled} = useContext(AppContext);
const comment = props.comment; const comment = props.comment;
const hasReplies = comment.replies && comment.replies.length > 0; const hasReplies = comment.replies && comment.replies.length > 0;
@ -41,7 +49,7 @@ const Comment = (props) => {
if (isInEditMode) { if (isInEditMode) {
return ( return (
<Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} /> <Form comment={comment} close={closeEditMode} parent={props.parent} isEdit={true} />
); );
} else { } else {
return ( return (
@ -82,7 +90,7 @@ const Comment = (props) => {
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="ml-14 my-10"> <div className="ml-14 my-10">
<Form parent={comment} toggle={toggleReplyMode} isReply={true} /> <Form parent={comment} close={closeReplyMode} isReply={true} />
</div> </div>
</Transition> </Transition>
</> </>

13
apps/comments-ui/src/components/Form.js
View file

@ -141,10 +141,10 @@ const Form = (props) => {
editor.on('blur', () => { editor.on('blur', () => {
if (editor?.isEmpty) { if (editor?.isEmpty) {
setFormOpen(false); setFormOpen(false);
if (props.isReply && props.toggle) { if (props.isReply && props.close) {
// TODO: we cannot toggle the form when this happens, because when the member doesn't have a name we'll always loose focus to input the name... // TODO: we cannot toggle the form when this happens, because when the member doesn't have a name we'll always loose focus to input the name...
// Need to find a different way for this behaviour // Need to find a different way for this behaviour
props.toggle(); props.close();
} }
} }
}); });
@ -177,10 +177,7 @@ const Form = (props) => {
// Clear message and blur on success // Clear message and blur on success
editor.chain().clearContent().blur().run(); editor.chain().clearContent().blur().run();
props.toggle(); props.close();
setFormOpen(false);
props.toggle();
} catch (e) { } catch (e) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(e); console.error(e);
@ -195,7 +192,7 @@ const Form = (props) => {
parent: props.parent parent: props.parent
}); });
props.toggle(); props.close();
} else { } else {
try { try {
// Send comment to server // Send comment to server
@ -291,7 +288,7 @@ const Form = (props) => {
transition-[opacity] duration-150 transition-[opacity] duration-150
"> ">
{props.isEdit && {props.isEdit &&
<button type="button" onClick={props.toggle} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>} <button type="button" onClick={props.close} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>}
<button <button
className={` className={`
transition-[opacity] duration-150 transition-[opacity] duration-150

7
apps/comments-ui/src/components/Reply.js
View file

@ -5,8 +5,13 @@ import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
function Reply(props) { function Reply(props) {
const {member} = useContext(AppContext); const {member} = useContext(AppContext);
const preventDefault = (event) => {
// We need to prevent blurring the input field when clicking the reply button (that could cause blur + focus again because mousedown is causing the input blur, then onclick focusses again)
event.preventDefault();
};
return member ? return member ?
(<button className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onClick={props.toggleReply}> (<button className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onMouseDown={preventDefault} onClick={props.toggleReply}>
<ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />Reply <ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />Reply
</button>) : null; </button>) : null;
} }