diff --git a/src/components/middle/ActionMessage.tsx b/src/components/middle/ActionMessage.tsx index 2a1421882..481e40b83 100644 --- a/src/components/middle/ActionMessage.tsx +++ b/src/components/middle/ActionMessage.tsx @@ -25,6 +25,7 @@ import useLang from '../../hooks/useLang'; import ContextMenuContainer from './message/ContextMenuContainer.async'; import useFlag from '../../hooks/useFlag'; import useShowTransition from '../../hooks/useShowTransition'; +import { preventMessageInputBlur } from './helpers/preventMessageInputBlur'; type OwnProps = { message: ApiMessage; @@ -96,6 +97,11 @@ const ActionMessage: FC = ({ } = useContextMenuHandlers(ref); const isContextMenuShown = contextMenuPosition !== undefined; + const handleMouseDown = (e: React.MouseEvent) => { + preventMessageInputBlur(e); + handleBeforeContextMenu(e); + }; + if (isEmbedded) { return {renderText(content as string)}; } @@ -114,7 +120,7 @@ const ActionMessage: FC = ({ id={`message${message.id}`} className={className} data-message-id={message.id} - onMouseDown={handleBeforeContextMenu} + onMouseDown={handleMouseDown} onContextMenu={handleContextMenu} > {content} diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index d79303390..b8a5bf2ec 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -45,6 +45,7 @@ import { formatHumanDate } from '../../util/dateFormat'; import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps'; import buildClassName from '../../util/buildClassName'; import { groupMessages, MessageDateGroup, isAlbum } from './helpers/groupMessages'; +import { preventMessageInputBlur } from './helpers/preventMessageInputBlur'; import { ObserveFn, useIntersectionObserver } from '../../hooks/useIntersectionObserver'; import useOnChange from '../../hooks/useOnChange'; import useStickyDates from './hooks/useStickyDates'; @@ -521,7 +522,12 @@ const MessageList: FC = ({ ); return ( -
+
{isRestricted ? (
@@ -704,11 +710,13 @@ function renderMessages(
openHistoryCalendar({ selectedAt: dateGroup.datetime }) : undefined} > diff --git a/src/components/middle/helpers/preventMessageInputBlur.ts b/src/components/middle/helpers/preventMessageInputBlur.ts new file mode 100644 index 000000000..2324daa66 --- /dev/null +++ b/src/components/middle/helpers/preventMessageInputBlur.ts @@ -0,0 +1,17 @@ +import React from '../../../lib/teact/teact'; + +import { EDITABLE_INPUT_ID } from '../../../config'; +import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment'; + +export function preventMessageInputBlur(e: React.MouseEvent) { + if ( + IS_SINGLE_COLUMN_LAYOUT + || !document.activeElement + || document.activeElement.id !== EDITABLE_INPUT_ID + || e.target !== e.currentTarget + ) { + return; + } + + e.preventDefault(); +} diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index f7ad326ea..a70ac8951 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -1,4 +1,3 @@ -import { MouseEvent as ReactMouseEvent } from 'react'; import React, { FC, memo, @@ -67,6 +66,7 @@ import { ROUND_VIDEO_DIMENSIONS } from '../../common/helpers/mediaDimensions'; import { buildContentClassName, isEmojiOnlyMessage } from './helpers/buildContentClassName'; import { getMinMediaWidth, calculateMediaDimensions } from './helpers/mediaDimensions'; import { calculateAlbumLayout } from './helpers/calculateAlbumLayout'; +import { preventMessageInputBlur } from '../helpers/preventMessageInputBlur'; import renderText from '../../common/helpers/renderText'; import calculateAuthorWidth from './helpers/calculateAuthorWidth'; import { ObserveFn, useOnIntersect } from '../../../hooks/useIntersectionObserver'; @@ -342,7 +342,7 @@ const Message: FC = ({ appendixRef.current.innerHTML = isOwn ? APPENDIX_OWN : APPENDIX_NOT_OWN; }, [isOwn, withAppendix]); - const handleGroupDocumentMessagesSelect = useCallback((e: ReactMouseEvent) => { + const handleGroupDocumentMessagesSelect = useCallback((e: React.MouseEvent) => { e.stopPropagation(); toggleMessageSelection({ @@ -351,7 +351,7 @@ const Message: FC = ({ }); }, [messageId, message.groupedId, toggleMessageSelection]); - const handleMessageSelect = useCallback((e?: ReactMouseEvent) => { + const handleMessageSelect = useCallback((e?: React.MouseEvent) => { const params = isAlbum && album && album.messages ? { messageId, @@ -366,10 +366,15 @@ const Message: FC = ({ setReplyingToId({ messageId }); }, [setReplyingToId, messageId]); - const handleContentDoubleClick = useCallback((e: ReactMouseEvent) => { + const handleContentDoubleClick = useCallback((e: React.MouseEvent) => { e.stopPropagation(); }, []); + const handleMouseDown = (e: React.MouseEvent) => { + preventMessageInputBlur(e); + handleBeforeContextMenu(e); + }; + const handleAvatarClick = useCallback(() => { if (!avatarPeer) { return; @@ -425,7 +430,7 @@ const Message: FC = ({ }); }, [chatId, threadId, openMediaViewer, isScheduled]); - const handleClick = useCallback((e: ReactMouseEvent) => { + const handleClick = useCallback((e: React.MouseEvent) => { const target = e.target as HTMLDivElement; if (!target.classList.contains('text-content') && !target.classList.contains('Message')) { return; @@ -754,7 +759,7 @@ const Message: FC = ({ data-message-id={messageId} onClick={isInSelectMode ? handleMessageSelect : IS_ANDROID ? handleClick : undefined} onDoubleClick={!isInSelectMode ? handleContainerDoubleClick : undefined} - onMouseDown={!isInSelectMode ? handleBeforeContextMenu : undefined} + onMouseDown={!isInSelectMode ? handleMouseDown : undefined} onContextMenu={!isInSelectMode ? handleContextMenu : undefined} onMouseEnter={isInDocumentGroup && !isLastInDocumentGroup ? handleDocumentGroupMouseEnter : undefined} onMouseLeave={isInDocumentGroup && !isLastInDocumentGroup ? handleDocumentGroupMouseLeave : undefined}