diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss index 9db638ea13..5e695a5cc3 100644 --- a/stylesheets/components/CompositionArea.scss +++ b/stylesheets/components/CompositionArea.scss @@ -82,6 +82,9 @@ &::before { @include color-svg('../images/icons/v3/check/check.svg', $color-white); } + &:disabled { + opacity: 0.5; + } } } diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx index c4a464dce4..3dc65a2471 100644 --- a/ts/components/CompositionArea.tsx +++ b/ts/components/CompositionArea.tsx @@ -359,7 +359,15 @@ export const CompositionArea = memo(function CompositionArea({ const editedMessageId = draftEditMessage?.targetMessageId; const handleSubmit = useCallback( - (message: string, bodyRanges: DraftBodyRanges, timestamp: number) => { + ( + message: string, + bodyRanges: DraftBodyRanges, + timestamp: number + ): boolean => { + if (!dirty) { + return false; + } + emojiButtonRef.current?.close(); if (editedMessageId) { @@ -380,9 +388,12 @@ export const CompositionArea = memo(function CompositionArea({ }); } setLarge(false); + + return true; }, [ conversationId, + dirty, draftAttachments, editedMessageId, quotedMessageSentAt, @@ -592,6 +603,7 @@ export const CompositionArea = memo(function CompositionArea({