Help Center: Prevent line breaks on Enter key press in ResizableTexta…

…rea component (#96313)
Automattic · Nov 13, 2024 · c80383a · c80383a
1 parent b90f42e
commit c80383a
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/odie-client/src/components/send-message-input/resizable-textarea.tsx b/packages/odie-client/src/components/send-message-input/resizable-textarea.tsx
@@ -29,6 +29,16 @@ export const ResizableTextarea: React.FC< {
 		[ inputRef, sendMessageHandler, keyUpHandle, setSubmitDisabled ]
 	);
 
+	const onKeyDown = useCallback(
+		async ( event: KeyboardEvent< HTMLTextAreaElement > ) => {
+			// Prevent line break when user sends a message
+			if ( event.key === 'Enter' && ! event.shiftKey && inputRef.current?.value.trim() !== '' ) {
+				event.preventDefault();
+			}
+		},
+		[ inputRef ]
+	);
+
 	useEffect( () => {
 		// Set's back the textarea height after sending messages, it is needed for long messages.
 		if ( inputRef.current ) {
@@ -54,6 +64,7 @@ export const ResizableTextarea: React.FC< {
 			rows={ 1 }
 			className={ className }
 			onKeyUp={ onKeyUp }
+			onKeyDown={ onKeyDown }
 			placeholder={ __( 'Type a message…', __i18n_text_domain__ ) }
 			style={ { transition: 'none' } }
 		/>