diff --git a/ts/components/conversation/message/OutgoingMessageStatus.tsx b/ts/components/conversation/message/OutgoingMessageStatus.tsx index 0701ce131..c710adfde 100644 --- a/ts/components/conversation/message/OutgoingMessageStatus.tsx +++ b/ts/components/conversation/message/OutgoingMessageStatus.tsx @@ -9,6 +9,7 @@ const MessageStatusSendingContainer = styled.div` align-self: flex-end; margin-bottom: 2px; margin-inline-start: 5px; + cursor: pointer; `; const MessageStatusSending = () => { diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index c65b52b76..b71117a1d 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -109,18 +109,21 @@ const StartRecordingButton = (props: { onClick: () => void }) => { ); }; -const ToggleEmojiButton = (props: { onClick: () => void }) => { - return ( - <SessionIconButton - iconType="emoji" - backgroundColor="var(--color-compose-view-button-background)" - iconSize={'huge2'} - borderRadius="300px" - iconPadding="6px" - onClick={props.onClick} - /> - ); -}; +const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: () => void }>( + (props, ref) => { + return ( + <SessionIconButton + iconType="emoji" + ref={ref} + backgroundColor="var(--color-compose-view-button-background)" + iconSize={'huge2'} + borderRadius="300px" + iconPadding="6px" + onClick={props.onClick} + /> + ); + } +); const SendMessageButton = (props: { onClick: () => void }) => { return ( @@ -205,7 +208,8 @@ const getDefaultState = (newConvoId?: string) => { class SessionCompositionBoxInner extends React.Component<Props, State> { private readonly textarea: React.RefObject<any>; private readonly fileInput: React.RefObject<HTMLInputElement>; - private emojiPanel: any; + private readonly emojiPanel: any; + private readonly emojiPanelButton: any; private linkPreviewAbortController?: AbortController; private container: any; private readonly mentionsRegex = /@\uFFD205[0-9a-f]{64}\uFFD7[^\uFFD2]+\uFFD2/gu; @@ -219,7 +223,8 @@ class SessionCompositionBoxInner extends React.Component<Props, State> { this.fileInput = React.createRef(); // Emojis - this.emojiPanel = null; + this.emojiPanel = React.createRef(); + this.emojiPanelButton = React.createRef(); autoBind(this); this.toggleEmojiPanel = debounce(this.toggleEmojiPanel.bind(this), 100); } @@ -271,7 +276,10 @@ class SessionCompositionBoxInner extends React.Component<Props, State> { } private handleClick(e: any) { - if (this.emojiPanel && this.emojiPanel.contains(e.target)) { + if ( + (this.emojiPanel?.current && this.emojiPanel.current.contains(e.target)) || + (this.emojiPanelButton?.current && this.emojiPanelButton.current.contains(e.target)) + ) { return; } @@ -421,11 +429,13 @@ class SessionCompositionBoxInner extends React.Component<Props, State> { {this.renderTextArea()} </div> - {typingEnabled && <ToggleEmojiButton onClick={this.toggleEmojiPanel} />} + {typingEnabled && ( + <ToggleEmojiButton ref={this.emojiPanelButton} onClick={this.toggleEmojiPanel} /> + )} <SendMessageButton onClick={this.onSendMessage} /> {typingEnabled && ( - <div ref={ref => (this.emojiPanel = ref)} onKeyDown={this.onKeyDown} role="button"> + <div ref={this.emojiPanel} onKeyDown={this.onKeyDown} role="button"> {showEmojiPanel && ( <SessionEmojiPanel onEmojiClicked={this.onEmojiClick} show={showEmojiPanel} /> )} diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx index f0cd37585..48271ec53 100644 --- a/ts/components/session/icon/SessionIconButton.tsx +++ b/ts/components/session/icon/SessionIconButton.tsx @@ -12,7 +12,7 @@ interface SProps extends SessionIconProps { margin?: string; } -const SessionIconButtonInner = (props: SProps) => { +const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => { const { iconType, iconSize, @@ -40,6 +40,7 @@ const SessionIconButtonInner = (props: SProps) => { <div className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')} role="button" + ref={ref} onClick={clickHandler} style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }} > @@ -58,6 +59,6 @@ const SessionIconButtonInner = (props: SProps) => { {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />} </div> ); -}; +}); export const SessionIconButton = React.memo(SessionIconButtonInner, _.isEqual); diff --git a/ts/interactions/conversations/unsendingInteractions.ts b/ts/interactions/conversations/unsendingInteractions.ts index d360941fd..5686bbb5d 100644 --- a/ts/interactions/conversations/unsendingInteractions.ts +++ b/ts/interactions/conversations/unsendingInteractions.ts @@ -53,7 +53,6 @@ async function unsendMessagesForEveryone( // sending to recipient all the messages separately for now await Promise.all( unsendMsgObjects.map(unsendObject => { - console.warn('sending unsend message', unsendObject); getMessageQueue() .sendToGroup(unsendObject, undefined, new PubKey(destinationId)) .catch(window?.log?.error);