From 4f3c2aaca97b2ab905a9a6318d7c92a5c5f9dfd9 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 15 May 2025 13:18:02 +0800 Subject: [PATCH 1/4] clear the emoji selection after refocus --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 6f2c3d72ad11..4924b5ca8063 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -176,6 +176,7 @@ function ReportActionItemMessageEdit( const setUpComposeFocusManager = useCallback(() => { ReportActionComposeFocusManager.onComposerFocus(() => { focus(true, emojiPickerSelectionRef.current ? {...emojiPickerSelectionRef.current} : undefined); + emojiPickerSelectionRef.current = undefined; }, true); }, [focus]); @@ -524,6 +525,7 @@ function ReportActionItemMessageEdit( isDisabled={shouldDisableEmojiPicker} onModalHide={() => { const activeElementId = DomUtils.getActiveElement()?.id; + console.log('modal hide', activeElementId) if (activeElementId === CONST.COMPOSER.NATIVE_ID || activeElementId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID) { return; } From 7bd7be15a2cce8c0021f18517cdbeaebdf95ad73 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 15 May 2025 13:18:21 +0800 Subject: [PATCH 2/4] fix side panel transition state is stuck at false initially --- src/hooks/useSidePanel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts index 3144e23b3a26..f1c3c96a1fe6 100644 --- a/src/hooks/useSidePanel.ts +++ b/src/hooks/useSidePanel.ts @@ -64,7 +64,7 @@ function useSidePanel() { const {windowWidth} = useWindowDimensions(); const sidePanelWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; - const [isSidePanelTransitionEnded, setIsSidePanelTransitionEnded] = useState(false); + const [isSidePanelTransitionEnded, setIsSidePanelTransitionEnded] = useState(true); const {shouldHideSidePanel, shouldHideSidePanelBackdrop, shouldHideHelpButton, sidePanelNVP} = useSidePanelDisplayStatus(); const shouldHideToolTip = isExtraLargeScreenWidth ? !isSidePanelTransitionEnded : !shouldHideSidePanel; From 0dfba972f5f76c5a459c8d42260caf838412a5e3 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 15 May 2025 13:58:28 +0800 Subject: [PATCH 3/4] lint --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 4924b5ca8063..59e02699c911 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -85,7 +85,7 @@ function ReportActionItemMessageEdit( {action, draftMessage, reportID, policyID, index, isGroupPolicyReport, shouldDisableEmojiPicker = false}: ReportActionItemMessageEditProps, forwardedRef: ForwardedRef, ) { - const [preferredSkinTone] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {initialValue: CONST.EMOJI_DEFAULT_SKIN_TONE}); + const [preferredSkinTone] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {initialValue: CONST.EMOJI_DEFAULT_SKIN_TONE, canBeMissing: true}); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -116,8 +116,8 @@ function ReportActionItemMessageEdit( willAlertModalBecomeVisible: false, isVisible: false, }, - ] = useOnyx(ONYXKEYS.MODAL); - const [onyxInputFocused = false] = useOnyx(ONYXKEYS.INPUT_FOCUSED); + ] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true}); + const [onyxInputFocused = false] = useOnyx(ONYXKEYS.INPUT_FOCUSED, {canBeMissing: true}); const textInputRef = useRef<(HTMLTextAreaElement & TextInput) | null>(null); const isFocusedRef = useRef(false); @@ -525,7 +525,6 @@ function ReportActionItemMessageEdit( isDisabled={shouldDisableEmojiPicker} onModalHide={() => { const activeElementId = DomUtils.getActiveElement()?.id; - console.log('modal hide', activeElementId) if (activeElementId === CONST.COMPOSER.NATIVE_ID || activeElementId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID) { return; } From 64629fa9b3cd362aadbed64831a153374eeb491e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sun, 18 May 2025 23:10:42 +0800 Subject: [PATCH 4/4] Revert "fix side panel transition state is stuck at false initially" This reverts commit 7bd7be15a2cce8c0021f18517cdbeaebdf95ad73. --- src/hooks/useSidePanel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts index 4f52c4b04c92..4fb4cf7df20b 100644 --- a/src/hooks/useSidePanel.ts +++ b/src/hooks/useSidePanel.ts @@ -63,7 +63,7 @@ function useSidePanel() { const {windowWidth} = useWindowDimensions(); const sidePanelWidth = shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth; - const [isSidePanelTransitionEnded, setIsSidePanelTransitionEnded] = useState(true); + const [isSidePanelTransitionEnded, setIsSidePanelTransitionEnded] = useState(false); const {shouldHideSidePanel, shouldHideSidePanelBackdrop, shouldHideHelpButton, sidePanelNVP} = useSidePanelDisplayStatus(); const shouldHideToolTip = isExtraLargeScreenWidth ? !isSidePanelTransitionEnded : !shouldHideSidePanel;