Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
Code Issues Releases Activity

fix: Handle escape actions properly in mentions input

Browse source
This commit is contained in:
Maksim Eltyshev 2025-06-06 12:48:43 +02:00
parent 63de346b0e
commit 2e6658221f
2 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/components/comments/Comments/Add.jsx
View file

@ -31,8 +31,9 @@ const Add = React.memo(() => {
const [isOpened, setIsOpened] = useState(false);
const [selectTextFieldState, selectTextField] = useToggle();
const mentionsInputRef = useRef(null);
const textFieldRef = useRef(null);
const textMentionsRef = useRef(null);
const textInputRef = useRef(null);
const [buttonRef, handleButtonRef] = useNestedRef();
const submit = useCallback(() => {
@ -42,24 +43,24 @@ const Add = React.memo(() => {
};
if (!cleanData.text) {
textFieldRef.current.select();
textInputRef.current.select();
return;
}
dispatch(entryActions.createCommentInCurrentCard(cleanData));
setData(DEFAULT_DATA);
selectTextField();
}, [dispatch, data, setData, selectTextField, textFieldRef]);
}, [dispatch, data, setData, selectTextField]);
const handleEscape = useCallback(() => {
if (mentionsInputRef.current.isOpened()) {
mentionsInputRef.current.clearSuggestions();
if (textMentionsRef.current.isOpened()) {
textMentionsRef.current.clearSuggestions();
return;
}
setIsOpened(false);
textFieldRef.current.blur();
}, [textFieldRef]);
textInputRef.current.blur();
}, []);
const [activateEscapeInterceptor, deactivateEscapeInterceptor] =
useEscapeInterceptor(handleEscape);
@ -95,8 +96,8 @@ const Add = React.memo(() => {
}, []);
const handleClickAwayCancel = useCallback(() => {
textFieldRef.current.focus();
}, [textFieldRef]);
textInputRef.current.focus();
}, []);
const clickAwayProps = useClickAwayListener(
[textFieldRef, buttonRef],
@ -123,18 +124,18 @@ const Add = React.memo(() => {
}, [isOpened]);
useDidUpdate(() => {
textFieldRef.current.focus();
textInputRef.current.focus();
}, [selectTextFieldState]);
return (
<Form onSubmit={handleSubmit}>
<div className={styles.field}>
<div ref={textFieldRef} className={styles.field}>
<MentionsInput
{...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
allowSpaceInQuery
allowSuggestionsAboveCursor
ref={mentionsInputRef}
inputRef={textFieldRef}
ref={textMentionsRef}
inputRef={textInputRef}
value={data.text}
placeholder={t('common.writeComment')}
maxLength={1048576}

22
client/src/components/comments/Comments/Edit.jsx
View file

@ -42,8 +42,9 @@ const Edit = React.memo(({ commentId, onClose }) => {
...defaultData,
}));
const mentionsInputRef = useRef(null);
const textFieldRef = useRef(null);
const textMentionsRef = useRef(null);
const textInputRef = useRef(null);
const [buttonRef, handleButtonRef] = useNestedRef();
const submit = useCallback(() => {
@ -79,6 +80,11 @@ const Edit = React.memo(({ commentId, onClose }) => {
submit();
}
} else if (event.key === 'Escape') {
if (textMentionsRef.current.isOpened()) {
textMentionsRef.current.clearSuggestions();
return;
}
onClose();
}
},
@ -86,8 +92,8 @@ const Edit = React.memo(({ commentId, onClose }) => {
);
const handleClickAwayCancel = useCallback(() => {
textFieldRef.current.focus();
}, [textFieldRef]);
textInputRef.current.focus();
}, []);
const clickAwayProps = useClickAwayListener(
[textFieldRef, buttonRef],
@ -106,18 +112,18 @@ const Edit = React.memo(({ commentId, onClose }) => {
);
useEffect(() => {
focusEnd(textFieldRef.current);
}, [textFieldRef]);
focusEnd(textInputRef.current);
}, []);
return (
<Form onSubmit={handleSubmit}>
<div className={styles.field}>
<div ref={textFieldRef} className={styles.field}>
<MentionsInput
{...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
allowSpaceInQuery
allowSuggestionsAboveCursor
ref={mentionsInputRef}
inputRef={textFieldRef}
ref={textMentionsRef}
inputRef={textInputRef}
value={data.text}
maxLength={1048576}
rows={3}