From 44efc482011a56a076540c651b542d0bfe83b01b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 23 Oct 2024 16:04:57 +0800 Subject: [PATCH 1/4] fix double focus trap --- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 4 ++-- .../report/ContextMenu/PopoverReportActionContextMenu.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index c89c507c2ae4..b79bf355363c 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -111,7 +111,7 @@ function BaseReportActionContextMenu({ }: BaseReportActionContextMenuProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const menuItemRefs = useRef({}); const [shouldKeepOpen, setShouldKeepOpen] = useState(false); const wrapperStyle = StyleUtils.getReportActionContextMenuStyles(isMini, shouldUseNarrowLayout); @@ -301,7 +301,7 @@ function BaseReportActionContextMenu({ return ( (isVisible || shouldKeepOpen) && ( - + Date: Wed, 23 Oct 2024 16:05:10 +0800 Subject: [PATCH 2/4] blur when modal focus trap is activated --- src/components/FocusTrap/FocusTrapForModal/index.web.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FocusTrap/FocusTrapForModal/index.web.tsx b/src/components/FocusTrap/FocusTrapForModal/index.web.tsx index 2608c58a4d23..63a33899822c 100644 --- a/src/components/FocusTrap/FocusTrapForModal/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForModal/index.web.tsx @@ -1,6 +1,7 @@ import FocusTrap from 'focus-trap-react'; import React from 'react'; import sharedTrapStack from '@components/FocusTrap/sharedTrapStack'; +import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import type FocusTrapForModalProps from './FocusTrapForModalProps'; @@ -9,6 +10,7 @@ function FocusTrapForModal({children, active, initialFocus = false}: FocusTrapFo Date: Wed, 23 Oct 2024 16:05:18 +0800 Subject: [PATCH 3/4] remove unnecessary code --- src/libs/ReportActionComposeFocusManager.ts | 9 --------- src/pages/home/report/ReportActionItem.tsx | 1 - 2 files changed, 10 deletions(-) diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 4d6a2b339809..450a6d7f5481 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -82,14 +82,6 @@ function isEditFocused(): boolean { return !!editComposerRef.current?.isFocused(); } -/** - * Utility function to blur both main composer and edit composer. - */ -function blurAll(): void { - composerRef.current?.blur(); - editComposerRef.current?.blur(); -} - export default { composerRef, onComposerFocus, @@ -98,5 +90,4 @@ export default { isFocused, editComposerRef, isEditFocused, - blurAll, }; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index c6f271a76de2..ab8534877da3 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -339,7 +339,6 @@ function ReportActionItem({ return; } - ReportActionComposeFocusManager.blurAll(); setIsContextMenuActive(true); const selection = SelectionScraper.getCurrentSelection(); ReportActionContextMenu.showContextMenu( From 846dfea980de0533d5c9bad62079d0dbf92758cb Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 23 Oct 2024 16:18:07 +0800 Subject: [PATCH 4/4] lint --- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 1 + src/pages/home/report/ReportActionItem.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index b79bf355363c..40ace38a9784 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -111,6 +111,7 @@ function BaseReportActionContextMenu({ }: BaseReportActionContextMenuProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const menuItemRefs = useRef({}); const [shouldKeepOpen, setShouldKeepOpen] = useState(false); diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index ab8534877da3..0af9bd61120d 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -49,7 +49,6 @@ import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; -import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import SelectionScraper from '@libs/SelectionScraper';