Message Context Menu: Fix reaction selector not closing on Esc (#3327)

src/components/middle/message/ContextMenuContainer.tsx

@@ -21,6 +21,7 @@ import {
   selectIsCurrentUserPremium,
   selectIsMessageProtected,
   selectIsPremiumPurchaseBlocked,
+  selectIsReactionPickerOpen,
   selectMessageCustomEmojiSets,
   selectMessageTranslations,
   selectRequestedTranslationLanguage,
@@ -110,6 +111,7 @@ type StateProps = {
   maxUniqueReactions?: number;
   threadId?: number;
   canPlayAnimatedEmojis?: boolean;
+  isReactionPickerOpen?: boolean;
 };
 
 const ContextMenuContainer: FC<OwnProps & StateProps> = ({
@@ -163,6 +165,7 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
   threadId,
   onClose,
   onCloseAnimationEnd,
+  isReactionPickerOpen,
 }) => {
   const {
     openChat,
@@ -473,6 +476,7 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
   return (
     <div className={buildClassName('ContextMenuContainer', transitionClassNames)}>
       <MessageContextMenu
+        isReactionPickerOpen={isReactionPickerOpen}
         availableReactions={availableReactions}
         topReactions={topReactions}
         message={message}
@@ -681,6 +685,7 @@ export default memo(withGlobal<OwnProps>(
       canShowOriginal: hasTranslation,
       canSelectLanguage: hasTranslation,
       canPlayAnimatedEmojis: selectCanPlayAnimatedEmojis(global),
+      isReactionPickerOpen: selectIsReactionPickerOpen(global),
     };
   },
 )(ContextMenuContainer));

src/components/middle/message/MessageContextMenu.scss

@@ -73,3 +73,8 @@
     }
   }
 }
+
+.ReactionSelector-hidden {
+  opacity: 0;
+  transition: 300ms opacity;
+}

src/components/middle/message/MessageContextMenu.tsx

@@ -39,6 +39,7 @@ import ReactionSelector from './ReactionSelector';
 import './MessageContextMenu.scss';
 
 type OwnProps = {
+  isReactionPickerOpen?: boolean;
   availableReactions?: ApiAvailableReaction[];
   topReactions?: ApiReaction[];
   isOpen: boolean;
@@ -122,6 +123,7 @@ const REACTION_SELECTOR_WIDTH_REM = 19.25;
 const ANIMATION_DURATION = 200;
 
 const MessageContextMenu: FC<OwnProps> = ({
+  isReactionPickerOpen,
   availableReactions,
   topReactions,
   isOpen,
@@ -222,6 +224,12 @@ const MessageContextMenu: FC<OwnProps> = ({
     onClose();
   });
 
+  useEffect(() => {
+    if (isOpen && areItemsHidden && !isReactionPickerOpen) {
+      onClose();
+    }
+  }, [onClose, isOpen, isReactionPickerOpen, areItemsHidden]);
+
   const handleOpenCustomEmojiSets = useLastCallback(() => {
     if (!customEmojiSets) return;
     if (customEmojiSets.length === 1) {
@@ -329,6 +337,7 @@ const MessageContextMenu: FC<OwnProps> = ({
           isCurrentUserPremium={isCurrentUserPremium}
           canPlayAnimatedEmojis={canPlayAnimatedEmojis}
           onShowMore={handleOpenReactionPicker}
+          className={buildClassName(areItemsHidden && 'ReactionSelector-hidden')}
         />
       )}
 

src/components/middle/message/ReactionSelector.tsx

@@ -6,7 +6,7 @@ import type {
 } from '../../../api/types';
 import type { IAnchorPosition } from '../../../types';
 
-import { createClassNameBuilder } from '../../../util/buildClassName';
+import buildClassName, { createClassNameBuilder } from '../../../util/buildClassName';
 import {
   isSameReaction, canSendReaction, getReactionUniqueKey, sortReactions,
 } from '../../../global/helpers';
@@ -32,6 +32,7 @@ type OwnProps = {
   isCurrentUserPremium?: boolean;
   canPlayAnimatedEmojis?: boolean;
   onShowMore: (position: IAnchorPosition) => void;
+  className?: string;
 };
 
 const cn = createClassNameBuilder('ReactionSelector');
@@ -48,6 +49,7 @@ const ReactionSelector: FC<OwnProps> = ({
   canPlayAnimatedEmojis,
   onToggleReaction,
   onShowMore,
+  className,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const ref = useRef<HTMLDivElement>(null);
@@ -94,7 +96,7 @@ const ReactionSelector: FC<OwnProps> = ({
   if (!reactionsToRender.length) return undefined;
 
   return (
-    <div className={cn('&', lang.isRtl && 'isRtl')} ref={ref}>
+    <div className={buildClassName(cn('&', lang.isRtl && 'isRtl'), className)} ref={ref}>
       <div className={cn('bubble-small', lang.isRtl && 'isRtl')} />
       <div className={cn('items-wrapper')}>
         <div className={cn('bubble-big', lang.isRtl && 'isRtl')} />