MM-52082 : Emoji Picker doesn't appear when clicking on Add Reaction from post menu in mobile view (#23174)

webapp/channels/src/components/emoji_picker/emoji_picker_overlay/emoji_picker_overlay.tsx

@@ -10,15 +10,18 @@ import {Constants} from 'utils/constants';
 
 import {Emoji} from '@mattermost/types/emojis';
 
-import EmojiPickerTabs from './emoji_picker_tabs';
+import EmojiPickerTabs from '../emoji_picker_tabs';
 
-type Props = {
-    show: boolean;
+import type {PropsFromRedux} from './index';
+
+export interface Props extends PropsFromRedux {
     container?: () => ReactNode;
     target: () => ReactNode;
     onEmojiClick: (emoji: Emoji) => void;
     onGifClick?: (gif: string) => void;
     onHide: () => void;
+    onExited?: () => void;
+    show: boolean;
     topOffset?: number;
     rightOffset?: number;
     leftOffset?: number;
@@ -26,7 +29,6 @@ type Props = {
     spaceRequiredBelow?: number;
     enableGifPicker?: boolean;
     defaultHorizontalPosition?: 'left' | 'right';
-    onExited?: () => void;
 }
 
 export default class EmojiPickerOverlay extends React.PureComponent<Props> {
@@ -79,8 +81,7 @@ export default class EmojiPickerOverlay extends React.PureComponent<Props> {
     });
 
     render() {
-        const {target, rightOffset, spaceRequiredAbove, spaceRequiredBelow, defaultHorizontalPosition, show} = this.props;
-
+        const {target, rightOffset, spaceRequiredAbove, spaceRequiredBelow, defaultHorizontalPosition, show, isMobileView} = this.props;
         const calculatedRightOffset = typeof rightOffset === 'undefined' ? this.emojiPickerPosition(target(), show) : rightOffset;
         const placement = this.getPlacement(target(), spaceRequiredAbove, spaceRequiredBelow, defaultHorizontalPosition, show);
 
@@ -88,7 +89,7 @@ export default class EmojiPickerOverlay extends React.PureComponent<Props> {
             <Overlay
                 show={show}
                 placement={placement}
-                rootClose={true}
+                rootClose={!isMobileView}
                 container={this.props.container}
                 onHide={this.props.onHide}
                 target={target}

webapp/channels/src/components/emoji_picker/emoji_picker_overlay/index.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect, ConnectedProps} from 'react-redux';
+
+import {GlobalState} from 'types/store';
+
+import {getIsMobileView} from 'selectors/views/browser';
+
+import EmojiPickerOverlay from './emoji_picker_overlay';
+
+function mapStateToProps(state: GlobalState) {
+    return {
+        isMobileView: getIsMobileView(state),
+    };
+}
+
+const connector = connect(mapStateToProps);
+
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(EmojiPickerOverlay);

webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap

@@ -10,13 +10,10 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
   }
   teamId="current_team_id"
 >
-  <EmojiPickerOverlay
-    enableGifPicker={false}
+  <Connect(EmojiPickerOverlay)
     onEmojiClick={[Function]}
     onHide={[MockFunction]}
     show={false}
-    spaceRequiredAbove={476}
-    spaceRequiredBelow={497}
     target={[MockFunction]}
     topOffset={-7}
   />

webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap

@@ -54,14 +54,11 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
     <span
       className="emoji-picker__container"
     >
-      <EmojiPickerOverlay
-        enableGifPicker={false}
+      <Connect(EmojiPickerOverlay)
         onEmojiClick={[Function]}
         onHide={[Function]}
         rightOffset={15}
         show={false}
-        spaceRequiredAbove={476}
-        spaceRequiredBelow={497}
         target={[Function]}
         topOffset={-5}
       />