From c337d6f6d0557ff68f7ceefbb83f2c1d3e931285 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 2 Sep 2024 17:07:23 +0200 Subject: [PATCH 1/8] remove focusing durty --- .../ReportActionCompose.tsx | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 72e89c8de013..f6cf812fd908 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -233,22 +233,8 @@ function ReportActionCompose({ return translate('reportActionCompose.writeSomething'); }, [includesConcierge, translate, userBlockedFromConcierge, conciergePlaceholderRandomIndex]); - const focus = () => { - if (composerRef.current === null) { - return; - } - composerRef.current?.focus(true); - }; - const isKeyboardVisibleWhenShowingModalRef = useRef(false); const isNextModalWillOpenRef = useRef(false); - const restoreKeyboardState = useCallback(() => { - if (!isKeyboardVisibleWhenShowingModalRef.current || isNextModalWillOpenRef.current) { - return; - } - focus(); - isKeyboardVisibleWhenShowingModalRef.current = false; - }, []); const containerRef = useRef(null); const measureContainer = useCallback( @@ -298,8 +284,7 @@ function ReportActionCompose({ const onAttachmentPreviewClose = useCallback(() => { updateShouldShowSuggestionMenuToFalse(); setIsAttachmentPreviewActive(false); - restoreKeyboardState(); - }, [updateShouldShowSuggestionMenuToFalse, restoreKeyboardState]); + }, [updateShouldShowSuggestionMenuToFalse]); /** * Add a new comment to this chat @@ -490,11 +475,18 @@ function ReportActionCompose({ isMenuVisible={isMenuVisible} onTriggerAttachmentPicker={onTriggerAttachmentPicker} raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered} + // TODO: Remove onCanceledAttachmentPicker={() => { - isNextModalWillOpenRef.current = false; - restoreKeyboardState(); + // isNextModalWillOpenRef.current = false; + isNextModalWillOpenRef.current = true; + console.debug('[TEST] onCanceledAttachmentPicker'); + // restoreKeyboardState(); + }} + // TODO: Remove + onMenuClosed={() => { + console.debug('[TEST] onMenuClosed'); + // restoreKeyboardState(); }} - onMenuClosed={restoreKeyboardState} onAddActionPressed={onAddActionPressed} onItemSelected={onItemSelected} actionButtonRef={actionButtonRef} @@ -559,11 +551,13 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { if (isNavigating) { return; } - focus(); + console.debug('[TEST] ReportActionCompose focus 3'); + // focus(); }} onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)} emojiPickerID={report?.reportID} From 6ff977ca0c160baf37ec9181852a0ce063fff4b1 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 3 Sep 2024 13:53:53 +0200 Subject: [PATCH 2/8] clear redundant code --- .../EmojiPicker/EmojiPickerButton.tsx | 4 ++-- .../AttachmentPickerWithMenuItems.tsx | 6 +++--- .../ReportActionCompose.tsx | 20 ------------------- 3 files changed, 5 insertions(+), 25 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.tsx b/src/components/EmojiPicker/EmojiPickerButton.tsx index 6e0944e5a913..a702a554cee3 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.tsx +++ b/src/components/EmojiPicker/EmojiPickerButton.tsx @@ -24,12 +24,12 @@ type EmojiPickerButtonProps = { /** Emoji popup anchor offset shift vertical */ shiftVertical?: number; - onModalHide: EmojiPickerAction.OnModalHideValue; + onModalHide?: EmojiPickerAction.OnModalHideValue; onEmojiSelected: EmojiPickerAction.OnEmojiSelected; }; -function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onModalHide, onEmojiSelected}: EmojiPickerButtonProps) { +function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onModalHide = () => {}, onEmojiSelected}: EmojiPickerButtonProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const emojiPopoverAnchor = useRef(null); diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 6e3c3a48de74..ea23759edbf2 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -70,10 +70,10 @@ type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps onTriggerAttachmentPicker: () => void; /** Called when cancelling the attachment picker */ - onCanceledAttachmentPicker: () => void; + onCanceledAttachmentPicker?: () => void; /** Called when the menu with the items is closed after it was open */ - onMenuClosed: () => void; + onMenuClosed?: () => void; /** Called when the add action button is pressed */ onAddActionPressed: () => void; @@ -187,7 +187,7 @@ function AttachmentPickerWithMenuItems({ const onPopoverMenuClose = () => { setMenuVisibility(false); - onMenuClosed(); + onMenuClosed?.(); }; const prevIsFocused = usePrevious(isFocused); diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index f6cf812fd908..2632fdf4f719 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -475,18 +475,6 @@ function ReportActionCompose({ isMenuVisible={isMenuVisible} onTriggerAttachmentPicker={onTriggerAttachmentPicker} raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered} - // TODO: Remove - onCanceledAttachmentPicker={() => { - // isNextModalWillOpenRef.current = false; - isNextModalWillOpenRef.current = true; - console.debug('[TEST] onCanceledAttachmentPicker'); - // restoreKeyboardState(); - }} - // TODO: Remove - onMenuClosed={() => { - console.debug('[TEST] onMenuClosed'); - // restoreKeyboardState(); - }} onAddActionPressed={onAddActionPressed} onItemSelected={onItemSelected} actionButtonRef={actionButtonRef} @@ -551,14 +539,6 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { - if (isNavigating) { - return; - } - console.debug('[TEST] ReportActionCompose focus 3'); - // focus(); - }} onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)} emojiPickerID={report?.reportID} shiftVertical={emojiShiftVertical} From 29bd0658236b5c6fcd28857ac965c78cb0fd558f Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 3 Sep 2024 14:41:50 +0200 Subject: [PATCH 3/8] do not focus on web --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 085aa2f7db9a..bbb56eee0a75 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -661,9 +661,7 @@ function ComposerWithSuggestions( if (editFocused) { InputFocus.inputFocusChange(false); - return; } - focus(true); }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus]); useEffect(() => { From 3c4b392981e8413e6bc71b96091c039bc4941bba Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 16 Sep 2024 14:49:55 +0200 Subject: [PATCH 4/8] refocus when RHP closed --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 0a8070130053..ddb64435f77a 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -672,7 +672,9 @@ function ComposerWithSuggestions( if (editFocused) { InputFocus.inputFocusChange(false); + return; } + focus(true); }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus]); useEffect(() => { From 110c6933e87d4108c757435dcc747cd325fbf768 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 18 Sep 2024 12:42:55 +0200 Subject: [PATCH 5/8] focus after emojis --- src/components/EmojiPicker/EmojiPickerButton.tsx | 4 ++-- .../ReportActionCompose/ReportActionCompose.tsx | 13 +++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.tsx b/src/components/EmojiPicker/EmojiPickerButton.tsx index 07badc1799b8..412c6655bdb0 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.tsx +++ b/src/components/EmojiPicker/EmojiPickerButton.tsx @@ -28,12 +28,12 @@ type EmojiPickerButtonProps = { /** Emoji popup anchor offset shift vertical */ shiftVertical?: number; - onModalHide?: EmojiPickerAction.OnModalHideValue; + onModalHide: EmojiPickerAction.OnModalHideValue; onEmojiSelected: EmojiPickerAction.OnEmojiSelected; }; -function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onPress, onModalHide = () => {}, onEmojiSelected}: EmojiPickerButtonProps) { +function EmojiPickerButton({isDisabled = false, id = '', emojiPickerID = '', shiftVertical = 0, onPress, onModalHide, onEmojiSelected}: EmojiPickerButtonProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const emojiPopoverAnchor = useRef(null); diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index b091485443ca..d3dbb7ac8927 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -208,6 +208,13 @@ function ReportActionCompose({ return translate('reportActionCompose.writeSomething'); }, [includesConcierge, translate, userBlockedFromConcierge]); + const focus = () => { + if (composerRef.current === null) { + return; + } + composerRef.current?.focus(true); + }; + const isKeyboardVisibleWhenShowingModalRef = useRef(false); const isNextModalWillOpenRef = useRef(false); @@ -514,6 +521,12 @@ function ReportActionCompose({ {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : ( { + if (isNavigating) { + return; + } + focus(); + }} onEmojiSelected={(...args) => composerRef.current?.replaceSelectionWithText(...args)} emojiPickerID={report?.reportID} shiftVertical={emojiShiftVertical} From 138290acd9b76c9368ae6fc951f513ced967155c Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 18 Sep 2024 16:49:33 +0200 Subject: [PATCH 6/8] refactor AttachmentPickerWithMenuItems --- .../AttachmentPickerWithMenuItems.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index ea23759edbf2..526e13b02c01 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {FileObject} from '@components/AttachmentModal'; import AttachmentPicker from '@components/AttachmentPicker'; import Icon from '@components/Icon'; @@ -33,12 +33,7 @@ import type * as OnyxTypes from '@src/types/onyx'; type MoneyRequestOptions = Record, PopoverMenuItem>; -type AttachmentPickerWithMenuItemsOnyxProps = { - /** The policy tied to the report */ - policy: OnyxEntry; -}; - -type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps & { +type AttachmentPickerWithMenuItemsProps = { /** The report currently being looked at */ report: OnyxEntry; @@ -97,7 +92,6 @@ type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps */ function AttachmentPickerWithMenuItems({ report, - policy, reportParticipantIDs, displayFileInModal, isFullComposerAvailable, @@ -121,6 +115,9 @@ function AttachmentPickerWithMenuItems({ const {translate} = useLocalize(); const {windowHeight, windowWidth} = useWindowDimensions(); const {shouldUseNarrowLayout} = useResponsiveLayout(); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, { + initialValue: {} as OnyxTypes.Policy, + }); /** * Returns the list of IOU Options @@ -336,9 +333,4 @@ function AttachmentPickerWithMenuItems({ AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems'; -export default withOnyx({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, - initialValue: {} as OnyxTypes.Policy, - }, -})(AttachmentPickerWithMenuItems); +export default AttachmentPickerWithMenuItems; From 522277ccd4a3f310bee2d0fdca08ec7a56a13084 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 18 Sep 2024 16:52:09 +0200 Subject: [PATCH 7/8] refactor ReportActionCompose --- .../ReportActionCompose.tsx | 30 +++++-------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index d3dbb7ac8927..f48bb8f9b6a4 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -4,7 +4,7 @@ import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 're import type {MeasureInWindowOnSuccessCallback, NativeSyntheticEvent, TextInputFocusEventData, TextInputSelectionChangeEventData} from 'react-native'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import {runOnUI, useSharedValue} from 'react-native-reanimated'; import type {Emoji} from '@assets/emojis/types'; import type {FileObject} from '@components/AttachmentModal'; @@ -63,16 +63,7 @@ type SuggestionsRef = { getIsSuggestionsMenuVisible: () => boolean; }; -type ReportActionComposeOnyxProps = { - /** The NVP describing a user's block status */ - blockedFromConcierge: OnyxEntry; - - /** Whether the composer input should be shown */ - shouldShowComposeInput: OnyxEntry; -}; - -type ReportActionComposeProps = ReportActionComposeOnyxProps & - WithCurrentUserPersonalDetailsProps & +type ReportActionComposeProps = WithCurrentUserPersonalDetailsProps & Pick & { /** A method to call when the form is submitted */ onSubmit: (newComment: string) => void; @@ -109,7 +100,6 @@ const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); let onSubmitAction = noop; function ReportActionCompose({ - blockedFromConcierge, currentUserPersonalDetails, disabled = false, isComposerFullSize = false, @@ -117,7 +107,6 @@ function ReportActionCompose({ pendingAction, report, reportID, - shouldShowComposeInput = true, isReportReadyForDisplay = true, isEmptyChat, lastReportAction, @@ -133,6 +122,10 @@ function ReportActionCompose({ const actionButtonRef = useRef(null); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const navigation = useNavigation(); + const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); + const [shouldShowComposeInput] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, { + initialValue: true, + }); /** * Updates the Highlight state of the composer @@ -558,15 +551,6 @@ function ReportActionCompose({ ReportActionCompose.displayName = 'ReportActionCompose'; -export default withCurrentUserPersonalDetails( - withOnyx({ - blockedFromConcierge: { - key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE, - }, - shouldShowComposeInput: { - key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, - }, - })(memo(ReportActionCompose)), -); +export default withCurrentUserPersonalDetails(memo(ReportActionCompose)); export {onSubmitAction}; export type {SuggestionsRef, ComposerRef}; From a14bd8fc22610c4ab71031f7b8b79bd61d022b15 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 25 Sep 2024 19:00:54 +0200 Subject: [PATCH 8/8] Refactor willBlurTextInputOnTapOutside to use getIsNarrowLayout --- src/libs/willBlurTextInputOnTapOutside/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/libs/willBlurTextInputOnTapOutside/index.ts b/src/libs/willBlurTextInputOnTapOutside/index.ts index 987d8a1dfeea..31a40932189e 100644 --- a/src/libs/willBlurTextInputOnTapOutside/index.ts +++ b/src/libs/willBlurTextInputOnTapOutside/index.ts @@ -1,5 +1,6 @@ +import getIsNarrowLayout from '@libs/getIsNarrowLayout'; import type WillBlurTextInputOnTapOutside from './types'; -const willBlurTextInputOnTapOutside: WillBlurTextInputOnTapOutside = () => true; +const willBlurTextInputOnTapOutside: WillBlurTextInputOnTapOutside = () => !getIsNarrowLayout(); export default willBlurTextInputOnTapOutside;