From e5c1033707e2b3b095f10a6251395bbde76a3190 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 19 Sep 2023 10:15:25 +0700 Subject: [PATCH 1/4] fix web focus border is not disappearing on click --- src/components/BaseMiniContextMenuItem.js | 7 ++++++- src/libs/ReportActionComposeFocusManager.ts | 6 ++++++ src/pages/home/report/ReportActionItemMessageEdit.js | 1 + 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index acf5d165d7c7..3070012a9294 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -8,6 +8,7 @@ import getButtonState from '../libs/getButtonState'; import variables from '../styles/variables'; import Tooltip from './Tooltip'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import ReportActionComposeFocusManager from '../libs/ReportActionComposeFocusManager'; const propTypes = { /** @@ -53,7 +54,11 @@ function BaseMiniContextMenuItem(props) { e.preventDefault()} + onMouseDown={(e) => { + if (ReportActionComposeFocusManager.isFocused() || ReportActionComposeFocusManager.isEditFocused()) { + e.preventDefault(); + } + }} accessibilityLabel={props.tooltipText} style={({hovered, pressed}) => [ styles.reportActionContextMenuMiniButton, diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 83493ed71fc5..0271bd5979ec 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -4,6 +4,7 @@ import {TextInput} from 'react-native'; type FocusCallback = () => void; const composerRef = React.createRef(); +const editComposerRef = React.createRef(); // There are two types of composer: general composer (edit composer) and main composer. // The general composer callback will take priority if it exists. let focusCallback: FocusCallback | null = null; @@ -56,6 +57,9 @@ function clear(isMainComposer = false) { function isFocused(): boolean { return !!composerRef.current?.isFocused(); } +function isEditFocused(): boolean { + return !!editComposerRef.current?.isFocused(); +} export default { composerRef, @@ -63,4 +67,6 @@ export default { focus, clear, isFocused, + editComposerRef, + isEditFocused, }; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 43ff5c00a4d5..6ce826a2a34c 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -370,6 +370,7 @@ function ReportActionItemMessageEdit(props) { { + ReportActionComposeFocusManager.editComposerRef.current = el; textInputRef.current = el; // eslint-disable-next-line no-param-reassign props.forwardedRef.current = el; From 927d1a7e536eec7de13a563a044e8ea4d23e1e3c Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 19 Sep 2023 10:27:20 +0700 Subject: [PATCH 2/4] fix lint issue --- src/components/BaseMiniContextMenuItem.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index 3070012a9294..64a24f526f54 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -55,9 +55,11 @@ function BaseMiniContextMenuItem(props) { ref={props.innerRef} onPress={props.onPress} onMouseDown={(e) => { - if (ReportActionComposeFocusManager.isFocused() || ReportActionComposeFocusManager.isEditFocused()) { - e.preventDefault(); + if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) { + return; } + + e.preventDefault(); }} accessibilityLabel={props.tooltipText} style={({hovered, pressed}) => [ From 4f884265545d89d7a0a98fd7d56153dc92779d97 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Wed, 20 Sep 2023 18:24:35 +0700 Subject: [PATCH 3/4] fix add comment to function isEditFocused --- src/libs/ReportActionComposeFocusManager.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 0271bd5979ec..ca4f9d77898b 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -57,6 +57,10 @@ function clear(isMainComposer = false) { function isFocused(): boolean { return !!composerRef.current?.isFocused(); } + +/** + * Exposes the current focus state of the edit message composer. + */ function isEditFocused(): boolean { return !!editComposerRef.current?.isFocused(); } From 7070dfe0471dfa60e862b9adb9946019b3bf6a5e Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Wed, 20 Sep 2023 19:12:01 +0700 Subject: [PATCH 4/4] fix edge case clicking on current active emoji --- src/components/BaseMiniContextMenuItem.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index 64a24f526f54..0e9085b54c17 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -9,6 +9,7 @@ import variables from '../styles/variables'; import Tooltip from './Tooltip'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import ReportActionComposeFocusManager from '../libs/ReportActionComposeFocusManager'; +import DomUtils from '../libs/DomUtils'; const propTypes = { /** @@ -56,6 +57,7 @@ function BaseMiniContextMenuItem(props) { onPress={props.onPress} onMouseDown={(e) => { if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) { + DomUtils.getActiveElement().blur(); return; }