fix: mini menu open picker wrong positioned + was closing

Expensify · Feb 16, 2023 · 99bfb91 · 99bfb91
1 parent 20d463c
commit 99bfb91
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -16,9 +16,11 @@ import emojis from '../../../assets/emojis';
 const propTypes = {
     onEmojiSelected: PropTypes.func.isRequired,
     onPressOpenPicker: PropTypes.func,
+    onEmojiPickerWillShow: PropTypes.func,
 };
 
 const defaultProps = {
+    onEmojiPickerWillShow: () => {},
     onPressOpenPicker: () => {},
 };
 
@@ -27,6 +29,7 @@ const MiniQuickEmojiReactions = (props) => {
     const ref = React.createRef();
 
     const openEmojiPicker = () => {
+        props.onPressOpenPicker();
         EmojiPickerAction.showEmojiPicker(
             () => {},
             (emojiCode) => {
@@ -36,9 +39,7 @@ const MiniQuickEmojiReactions = (props) => {
                 }
             },
             ref.current,
-            () => {
-                props.onPressOpenPicker();
-            },
+            props.onEmojiPickerWillShow,
         );
     };
 

diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -43,6 +43,10 @@ class BaseReportActionContextMenu extends React.Component {
     constructor(props) {
         super(props);
         this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
+
+        this.state = {
+            keepOpen: false,
+        };
     }
 
     render() {
@@ -55,7 +59,7 @@ class BaseReportActionContextMenu extends React.Component {
             this.props.isChronosReport,
         );
 
-        return this.props.isVisible && (
+        return (this.props.isVisible || this.state.keepOpen) && (
             <View style={this.wrapperStyle}>
                 {_.map(_.filter(ContextMenuActions, shouldShowFilter), (contextAction) => {
                     const closePopup = !this.props.isMini;
@@ -64,6 +68,8 @@ class BaseReportActionContextMenu extends React.Component {
                         reportID: this.props.reportID,
                         draftMessage: this.props.draftMessage,
                         selection: this.props.selection,
+                        close: () => this.setState({keepOpen: false}),
+                        keepOpen: () => this.setState({keepOpen: true}),
                     };
 
                     if (contextAction.renderContent) {

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -39,10 +39,14 @@ const CONTEXT_MENU_TYPES = {
 // A list of all the context actions in this menu.
 export default [
     {
+        keepOpen: true,
         shouldShow: () => true,
-        renderContent: (closePopover, {reportID, reportAction}) => {
+        renderContent: (closePopover, {
+            reportID, reportAction, close: closeManually, keepOpen,
+        }) => {
             const close = () => {
                 if (!closePopover) {
+                    closeManually();
                     return;
                 }
                 hideContextMenu(false);
@@ -60,8 +64,8 @@ export default [
                 return (
                     <MiniQuickEmojiReactions
                         key="MiniQuickEmojiReactions"
-                        onPressOpenPicker={close}
                         onEmojiSelected={onEmojiSelected}
+                        onPressOpenPicker={keepOpen}
                     />
                 );
             }