Merge pull request #28899 from ginsuma/fix/26763-new-ui

mWeb: Keep the focus state of the composer when closing three dots menu in report header
Expensify · Oct 18, 2023 · 44c90d3 · 44c90d3
2 parents ad9cf43 + 1a7a5dc
commit 44c90d3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
@@ -34,6 +34,9 @@ const propTypes = {
     }),
 
     withoutOverlay: PropTypes.bool,
+
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -44,6 +47,7 @@ const defaultProps = {
     },
     anchorRef: () => {},
     withoutOverlay: false,
+    shouldSetModalVisibility: true,
 };
 
 function PopoverMenu(props) {
@@ -89,6 +93,7 @@ function PopoverMenu(props) {
             disableAnimation={props.disableAnimation}
             fromSidebarMediumScreen={props.fromSidebarMediumScreen}
             withoutOverlay={props.withoutOverlay}
+            shouldSetModalVisibility={props.shouldSetModalVisibility}
         >
             <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
                 {!_.isEmpty(props.headerText) && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{props.headerText}</Text>}

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
@@ -11,6 +11,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
 import CONST from '../../CONST';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import * as Browser from '../../libs/Browser';
 
 const propTypes = {
     /** Tooltip for the popup icon */
@@ -48,6 +49,9 @@ const propTypes = {
 
     /** Whether the popover menu should overlay the current view */
     shouldOverlay: PropTypes.bool,
+
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -61,9 +65,10 @@ const defaultProps = {
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
     shouldOverlay: false,
+    shouldSetModalVisibility: true,
 };
 
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay, shouldSetModalVisibility}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();
@@ -91,6 +96,13 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                                 onIconPress();
                             }
                         }}
+                        onMouseDown={(e) => {
+                            /* Keep the focus state on mWeb like we did on the native apps. */
+                            if (!Browser.isMobile()) {
+                                return;
+                            }
+                            e.preventDefault();
+                        }}
                         ref={buttonRef}
                         style={[styles.touchableButtonImage, ...iconStyles]}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
@@ -111,6 +123,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                 onItemSelected={hidePopoverMenu}
                 menuItems={menuItems}
                 withoutOverlay={!shouldOverlay}
+                shouldSetModalVisibility={shouldSetModalVisibility}
                 anchorRef={buttonRef}
             />
         </>

diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -118,7 +118,6 @@ function BaseVideoChatButtonAndMenu(props) {
                     left: videoChatIconPosition.x - 150,
                     top: videoChatIconPosition.y + 40,
                 }}
-                shouldSetModalVisibility={false}
                 withoutOverlay
                 anchorRef={videoChatButtonRef}
             >

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -255,6 +255,7 @@ function HeaderView(props) {
                                 <ThreeDotsMenu
                                     anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
                                     menuItems={threeDotMenuItems}
+                                    shouldSetModalVisibility={false}
                                 />
                             )}
                         </View>