fix: draft keeping content incorrectly sometimes (#5827)

RocketChat · Aug 15, 2024 · 6f8fb6b · 6f8fb6b
1 parent bb59d98
commit 6f8fb6b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/app/containers/MessageComposer/components/ComposerInput.tsx b/app/containers/MessageComposer/components/ComposerInput.tsx
@@ -58,7 +58,7 @@ export const ComposerInput = memo(
 		const usedCannedResponse = route.params?.usedCannedResponse;
 		const prevAction = usePrevious(action);
 
-		useAutoSaveDraft(textRef.current);
+		const { saveMessageDraft } = useAutoSaveDraft(textRef.current);
 
 		// Draft/Canned Responses
 		useEffect(() => {
@@ -142,7 +142,7 @@ export const ComposerInput = memo(
 		useImperativeHandle(ref, () => ({
 			getTextAndClear: () => {
 				const text = textRef.current;
-				setInput('');
+				setInput('', undefined, true);
 				return text;
 			},
 			getText: () => textRef.current,
@@ -151,12 +151,16 @@ export const ComposerInput = memo(
 			onAutocompleteItemSelected
 		}));
 
-		const setInput: TSetInput = (text, selection) => {
+		const setInput: TSetInput = (text, selection, forceUpdateDraftMessage) => {
 			const message = text.trim();
 			textRef.current = message;
-			if (inputRef.current) {
-				inputRef.current.setNativeProps({ text });
+
+			if (forceUpdateDraftMessage) {
+				saveMessageDraft('');
 			}
+
+			inputRef.current?.setNativeProps?.({ text });
+
 			if (selection) {
 				// setSelection won't trigger onSelectionChange, so we need it to be ran after new text is set
 				setTimeout(() => {

diff --git a/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts b/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts
@@ -14,16 +14,26 @@ export const useAutoSaveDraft = (text = '') => {
 
 	const mounted = useRef(true);
 
-	const saveMessageDraft = useCallback(() => {
-		if (route.name === 'ShareView') return;
-		if (action === 'edit') return;
-		const draftMessage = selectedMessages?.length ? JSON.stringify({ quotes: selectedMessages, msg: text }) : text;
-		if (oldText.current !== draftMessage || (oldText.current === '' && draftMessage === '')) {
-			oldText.current = draftMessage;
-			saveDraftMessage({ rid, tmid, draftMessage });
-		}
-	}, [action, rid, tmid, text, selectedMessages?.length, route.name]);
+	const saveMessageDraft = useCallback(
+		(m?: string) => {
+			if (route.name === 'ShareView') return;
+			if (action === 'edit') return;
 
+			let draftMessage = '';
+			if (selectedMessages?.length) {
+				draftMessage = JSON.stringify({ quotes: selectedMessages, msg: text });
+			} else {
+				draftMessage = m ?? text;
+			}
+			if (oldText.current !== draftMessage || (oldText.current === '' && draftMessage === '') || m !== undefined) {
+				oldText.current = draftMessage;
+				saveDraftMessage({ rid, tmid, draftMessage });
+			}
+		},
+		[action, rid, tmid, text, selectedMessages?.length, route.name]
+	);
+
+	// if focused on composer input, saves every N seconds
 	useEffect(() => {
 		if (focused) {
 			intervalRef.current = setInterval(saveMessageDraft, 3000) as any;
@@ -52,4 +62,6 @@ export const useAutoSaveDraft = (text = '') => {
 		},
 		[saveMessageDraft]
 	);
+
+	return { saveMessageDraft };
 };
diff --git a/app/containers/MessageComposer/interfaces.ts b/app/containers/MessageComposer/interfaces.ts
@@ -17,7 +17,7 @@ export interface IInputSelection {
 	end: number;
 }
 
-export type TSetInput = (text: string, selection?: IInputSelection) => void;
+export type TSetInput = (text: string, selection?: IInputSelection, forceUpdateDraftMessage?: boolean) => void;
 
 export type TMicOrSend = 'mic' | 'send';