mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Fixed reply box redrawing when clicking the button again
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:
parent
3fbb7a6c24
commit
2e7055622e
3 changed files with 21 additions and 11 deletions
|
@ -17,10 +17,18 @@ const Comment = (props) => {
|
|||
setIsInEditMode(current => !current);
|
||||
};
|
||||
|
||||
const closeEditMode = () => {
|
||||
setIsInEditMode(false);
|
||||
};
|
||||
|
||||
const toggleReplyMode = () => {
|
||||
setIsInReplyMode(current => !current);
|
||||
};
|
||||
|
||||
const closeReplyMode = () => {
|
||||
setIsInReplyMode(false);
|
||||
};
|
||||
|
||||
const {admin, avatarSaturation, member, commentsEnabled} = useContext(AppContext);
|
||||
const comment = props.comment;
|
||||
const hasReplies = comment.replies && comment.replies.length > 0;
|
||||
|
@ -41,7 +49,7 @@ const Comment = (props) => {
|
|||
|
||||
if (isInEditMode) {
|
||||
return (
|
||||
<Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
|
||||
<Form comment={comment} close={closeEditMode} parent={props.parent} isEdit={true} />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
@ -82,7 +90,7 @@ const Comment = (props) => {
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="ml-14 my-10">
|
||||
<Form parent={comment} toggle={toggleReplyMode} isReply={true} />
|
||||
<Form parent={comment} close={closeReplyMode} isReply={true} />
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
|
|
|
@ -141,10 +141,10 @@ const Form = (props) => {
|
|||
editor.on('blur', () => {
|
||||
if (editor?.isEmpty) {
|
||||
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...
|
||||
// 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
|
||||
editor.chain().clearContent().blur().run();
|
||||
props.toggle();
|
||||
|
||||
setFormOpen(false);
|
||||
props.toggle();
|
||||
props.close();
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(e);
|
||||
|
@ -195,7 +192,7 @@ const Form = (props) => {
|
|||
parent: props.parent
|
||||
});
|
||||
|
||||
props.toggle();
|
||||
props.close();
|
||||
} else {
|
||||
try {
|
||||
// Send comment to server
|
||||
|
@ -291,7 +288,7 @@ const Form = (props) => {
|
|||
transition-[opacity] duration-150
|
||||
">
|
||||
{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
|
||||
className={`
|
||||
transition-[opacity] duration-150
|
||||
|
|
|
@ -5,8 +5,13 @@ import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
|
|||
function Reply(props) {
|
||||
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 ?
|
||||
(<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
|
||||
</button>) : null;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue