diff --git a/webapp/channels/src/components/edit_post/edit_post.tsx b/webapp/channels/src/components/edit_post/edit_post.tsx index 43ea473109..2edc6561c0 100644 --- a/webapp/channels/src/components/edit_post/edit_post.tsx +++ b/webapp/channels/src/components/edit_post/edit_post.tsx @@ -100,6 +100,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, draft.message || editingPost?.post?.message_source || editingPost?.post?.message || '', ); const [selectionRange, setSelectionRange] = useState({start: editText.length, end: editText.length}); + const caretPosition = useRef(editText.length); const [postError, setPostError] = useState(null); const [errorClass, setErrorClass] = useState(''); const [showEmojiPicker, setShowEmojiPicker] = useState(false); @@ -160,7 +161,12 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, }, [selectionRange]); // just a helper so it's not always needed to update with setting both properties to the same value - const setCaretPosition = (position: number) => setSelectionRange({start: position, end: position}); + const setSelectionRangeByCaretPosition = (position: number) => setSelectionRange({start: position, end: position}); + + const handleBlur = (e: React.FocusEvent) => { + const target = e.target as HTMLTextAreaElement; + caretPosition.current = target.selectionEnd; + }; const handlePaste = useCallback((e: ClipboardEvent) => { const {clipboardData, target} = e; @@ -194,7 +200,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, } setEditText(message); - setCaretPosition(newCaretPosition); + setSelectionRangeByCaretPosition(newCaretPosition); }, [canEditPost, selectionRange, editText]); const isSaveDisabled = () => { @@ -411,7 +417,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, if (editText.length > 0) { const {firstPiece, lastPiece} = splitMessageBasedOnCaretPosition( - selectionRange.start, + caretPosition.current, editText, ); @@ -427,7 +433,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, }; setEditText(newMessage); - setCaretPosition(newCaretPosition); + setSelectionRangeByCaretPosition(newCaretPosition); setShowEmojiPicker(false); textboxRef.current?.focus(); }; @@ -510,6 +516,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft, onChange={handleChange} onKeyPress={handleEditKeyPress} onKeyDown={handleKeyDown} + onBlur={handleBlur} onHeightChange={handleHeightChange} handlePostError={handlePostError} onPaste={handlePaste} diff --git a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx index a447d15db2..ff8f58ea95 100644 --- a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx +++ b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx @@ -296,7 +296,7 @@ export default class SuggestionBox extends React.PureComponent { this.setState({focused: false}); if (this.props.onBlur) { - this.props.onBlur(); + this.props.onBlur(e); } };