Composer: Prevent losing input focus when sending various media

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 && (

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 && (

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">

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);
+}

src/components/ui/ListItem.tsx

@@ -15,16 +15,14 @@ import MenuItem from './MenuItem';
 
 import './ListItem.scss';
 
-type OnClickHandler = (e: React.MouseEvent<HTMLDivElement>) => void;
+interface MenuItemContextAction {
-
-type 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')}

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}