From c126b5f554c0d66aa9e403ef4b22c155b77bf5e6 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:00:13 +0700 Subject: [PATCH 1/4] Remove focus when closing three dots menu in report header --- src/components/PopoverMenu/index.js | 5 +++++ src/components/ThreeDotsMenu/index.js | 7 ++++++- .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js | 1 - src/pages/home/HeaderView.js | 1 + 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 4cdc7a5a4f47..a4c1d282e677 100644 --- 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} > {!_.isEmpty(props.headerText) && {props.headerText}} diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index f0cee6fdea2f..a6e8e3c814a0 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -48,6 +48,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 +64,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(); @@ -111,6 +115,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 index f052116697b3..d89c9bc7a953 100755 --- 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 index ed26f7b9c084..19e35a5b37a9 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -273,6 +273,7 @@ function HeaderView(props) { )} From 71ab28ca82f1103fbc182668f322ad18166f27b2 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:31:07 +0700 Subject: [PATCH 2/4] Remove focus on native apps --- src/pages/home/HeaderView.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 19e35a5b37a9..d837b740412f 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -29,6 +29,7 @@ import * as Link from '../../libs/actions/Link'; import * as Report from '../../libs/actions/Report'; import * as Session from '../../libs/actions/Session'; import * as Task from '../../libs/actions/Task'; +import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; @@ -274,6 +275,14 @@ function HeaderView(props) { anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)} menuItems={threeDotMenuItems} shouldSetModalVisibility={false} + onIconPress={() => { + const {composerRef, editComposerRef, isFocused, isEditFocused} = ReportActionComposeFocusManager; + if (isFocused()) { + composerRef.current.blur(); + } else if (isEditFocused()) { + editComposerRef.current.blur(); + } + }} /> )} From 063ac7a320f57d558b530559746306148c069949 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Mon, 9 Oct 2023 13:59:16 +0700 Subject: [PATCH 3/4] Keep focus state on mWeb --- src/components/ThreeDotsMenu/index.js | 7 +++++++ src/pages/home/HeaderView.js | 9 --------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index a6e8e3c814a0..befbbde04e73 100644 --- 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 */ @@ -95,6 +96,12 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me onIconPress(); } }} + onMouseDown={(e) => { + if (!Browser.isMobile()) { + return; + } + e.preventDefault(); + }} ref={buttonRef} style={[styles.touchableButtonImage, ...iconStyles]} accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 85d0f9f86069..38ab8bd876a3 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -29,7 +29,6 @@ import * as Link from '../../libs/actions/Link'; import * as Report from '../../libs/actions/Report'; import * as Session from '../../libs/actions/Session'; import * as Task from '../../libs/actions/Task'; -import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; @@ -275,14 +274,6 @@ function HeaderView(props) { anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)} menuItems={threeDotMenuItems} shouldSetModalVisibility={false} - onIconPress={() => { - const {composerRef, editComposerRef, isFocused, isEditFocused} = ReportActionComposeFocusManager; - if (isFocused()) { - composerRef.current.blur(); - } else if (isEditFocused()) { - editComposerRef.current.blur(); - } - }} /> )} From 1a7a5dc80c84c5ef9ad3c0dd003369d7b011eaed Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Thu, 19 Oct 2023 00:10:47 +0700 Subject: [PATCH 4/4] Add comment --- src/components/ThreeDotsMenu/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index befbbde04e73..c07a3fc8ee44 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -97,6 +97,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me } }} onMouseDown={(e) => { + /* Keep the focus state on mWeb like we did on the native apps. */ if (!Browser.isMobile()) { return; }