From 6cc4a94407c06b80bfd30b0482b5ab52cea4e5c4 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 25 Aug 2021 16:29:22 +0300
Subject: [PATCH] Composer: Prevent losing input focus when sending various
 media

---
 src/components/common/GifButton.tsx               |  2 ++
 src/components/common/StickerButton.tsx           |  2 ++
 .../middle/composer/inlineResults/BaseResult.tsx  |  2 ++
 .../middle/helpers/preventMessageInputBlur.ts     |  8 ++++++--
 src/components/ui/ListItem.tsx                    | 15 ++++++++-------
 src/components/ui/Menu.tsx                        |  3 ++-
 6 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/common/GifButton.tsx b/src/components/common/GifButton.tsx
index f8cdb881..1838a5f9 100644
--- a/src/components/common/GifButton.tsx
+++ b/src/components/common/GifButton.tsx
@@ -11,6 +11,7 @@ import useTransitionForMedia from '../../hooks/useTransitionForMedia';
 import useVideoCleanup from '../../hooks/useVideoCleanup';
 import useBuffering from '../../hooks/useBuffering';
 import useCanvasBlur from '../../hooks/useCanvasBlur';
+import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur';
 
 import Spinner from '../ui/Spinner';
 
@@ -66,6 +67,7 @@ const GifButton: FC<OwnProps> = ({
     <div
       ref={ref}
       className={fullClassName}
+      onMouseDown={preventMessageInputBlurWithBubbling}
       onClick={handleClick}
     >
       {hasThumbnail && (
diff --git a/src/components/common/StickerButton.tsx b/src/components/common/StickerButton.tsx
index f36a9cf7..cd3ea36c 100644
--- a/src/components/common/StickerButton.tsx
+++ b/src/components/common/StickerButton.tsx
@@ -10,6 +10,7 @@ import useMedia from '../../hooks/useMedia';
 import useTransitionForMedia from '../../hooks/useTransitionForMedia';
 import useFlag from '../../hooks/useFlag';
 import buildClassName from '../../util/buildClassName';
+import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur';
 
 import AnimatedSticker from './AnimatedSticker';
 import Button from '../ui/Button';
@@ -90,6 +91,7 @@ const StickerButton: FC<OwnProps> = ({
       // @ts-ignore
       style={style}
       data-sticker-id={sticker.id}
+      onMouseDown={preventMessageInputBlurWithBubbling}
       onClick={handleClick}
     >
       {shouldRenderPreview && !canAnimatedPlay && (
diff --git a/src/components/middle/composer/inlineResults/BaseResult.tsx b/src/components/middle/composer/inlineResults/BaseResult.tsx
index 73ae6339..67139257 100644
--- a/src/components/middle/composer/inlineResults/BaseResult.tsx
+++ b/src/components/middle/composer/inlineResults/BaseResult.tsx
@@ -9,6 +9,7 @@ import useMedia from '../../../../hooks/useMedia';
 import ListItem from '../../../ui/ListItem';
 
 import './BaseResult.scss';
+import { preventMessageInputBlurWithBubbling } from '../../helpers/preventMessageInputBlur';
 
 export type OwnProps = {
   focus?: boolean;
@@ -46,6 +47,7 @@ const BaseResult: FC<OwnProps> = ({
     <ListItem
       focus={focus}
       className="BaseResult chat-item-clickable"
+      onMouseDown={preventMessageInputBlurWithBubbling}
       onClick={onClick}
     >
       <span className="thumb">
diff --git a/src/components/middle/helpers/preventMessageInputBlur.ts b/src/components/middle/helpers/preventMessageInputBlur.ts
index 67e25cef..0771e166 100644
--- a/src/components/middle/helpers/preventMessageInputBlur.ts
+++ b/src/components/middle/helpers/preventMessageInputBlur.ts
@@ -3,15 +3,19 @@ import React from '../../../lib/teact/teact';
 import { EDITABLE_INPUT_ID } from '../../../config';
 import { IS_IOS } from '../../../util/environment';
 
-export function preventMessageInputBlur(e: React.MouseEvent<HTMLElement>) {
+export function preventMessageInputBlur(e: React.MouseEvent<HTMLElement>, withBubbling = false) {
   if (
     IS_IOS
     || !document.activeElement
     || document.activeElement.id !== EDITABLE_INPUT_ID
-    || e.target !== e.currentTarget
+    || (!withBubbling && e.target !== e.currentTarget)
   ) {
     return;
   }
 
   e.preventDefault();
 }
+
+export function preventMessageInputBlurWithBubbling(e: React.MouseEvent<HTMLElement>) {
+  preventMessageInputBlur(e, true);
+}
diff --git a/src/components/ui/ListItem.tsx b/src/components/ui/ListItem.tsx
index 785d3765..8edc986d 100644
--- a/src/components/ui/ListItem.tsx
+++ b/src/components/ui/ListItem.tsx
@@ -15,16 +15,14 @@ import MenuItem from './MenuItem';
 
 import './ListItem.scss';
 
-type OnClickHandler = (e: React.MouseEvent<HTMLDivElement>) => void;
-
-type MenuItemContextAction = {
+interface MenuItemContextAction {
   title: string;
   icon: string;
   destructive?: boolean;
   handler?: () => void;
-};
+}
 
-type OwnProps = {
+interface OwnProps {
   ref?: RefObject<HTMLDivElement>;
   buttonRef?: RefObject<HTMLDivElement>;
   icon?: string;
@@ -40,8 +38,9 @@ type OwnProps = {
   multiline?: boolean;
   isStatic?: boolean;
   contextActions?: MenuItemContextAction[];
-  onClick?: OnClickHandler;
-};
+  onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
 
 const ListItem: FC<OwnProps> = (props) => {
   const {
@@ -60,6 +59,7 @@ const ListItem: FC<OwnProps> = (props) => {
     multiline,
     isStatic,
     contextActions,
+    onMouseDown,
     onClick,
   } = props;
 
@@ -147,6 +147,7 @@ const ListItem: FC<OwnProps> = (props) => {
       dir={lang.isRtl ? 'rtl' : undefined}
       // @ts-ignore
       style={style}
+      onMouseDown={onMouseDown}
     >
       <div
         className={buildClassName('ListItem-button', isTouched && 'active')}
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 49ae67cc..0375672e 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -9,6 +9,7 @@ import captureEscKeyListener from '../../util/captureEscKeyListener';
 import buildClassName from '../../util/buildClassName';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
 import useHistoryBack from '../../hooks/useHistoryBack';
+import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur';
 
 import './Menu.scss';
 
@@ -109,7 +110,7 @@ const Menu: FC<OwnProps> = ({
     >
       {isOpen && (
         // This only prevents click events triggering on underlying elements
-        <div className="backdrop" />
+        <div className="backdrop" onMouseDown={preventMessageInputBlurWithBubbling} />
       )}
       <div
         ref={menuRef}