diff --git a/src/libs/ReportActionItemEventHandler/index.android.ts b/src/libs/ReportActionItemEventHandler/index.android.ts new file mode 100644 index 000000000000..ba24fceb9899 --- /dev/null +++ b/src/libs/ReportActionItemEventHandler/index.android.ts @@ -0,0 +1,14 @@ +import {InteractionManager} from 'react-native'; +import type ReportActionItemEventHandler from './types'; + +const reportActionItemEventHandler: ReportActionItemEventHandler = { + handleComposerLayoutChange: (reportScrollManager, index) => () => { + InteractionManager.runAfterInteractions(() => { + requestAnimationFrame(() => { + reportScrollManager.scrollToIndex(index, true); + }); + }); + }, +}; + +export default reportActionItemEventHandler; diff --git a/src/libs/ReportActionItemEventHandler/index.ts b/src/libs/ReportActionItemEventHandler/index.ts new file mode 100644 index 000000000000..87d79a8d3ad0 --- /dev/null +++ b/src/libs/ReportActionItemEventHandler/index.ts @@ -0,0 +1,7 @@ +import type ReportActionItemEventHandler from './types'; + +const reportActionItemEventHandler: ReportActionItemEventHandler = { + handleComposerLayoutChange: () => () => {}, +}; + +export default reportActionItemEventHandler; diff --git a/src/libs/ReportActionItemEventHandler/types.ts b/src/libs/ReportActionItemEventHandler/types.ts new file mode 100644 index 000000000000..810c3ec02373 --- /dev/null +++ b/src/libs/ReportActionItemEventHandler/types.ts @@ -0,0 +1,8 @@ +import type {LayoutChangeEvent} from 'react-native'; +import type ReportScrollManagerData from '@hooks/useReportScrollManager/types'; + +type ReportActionItemEventHandler = { + handleComposerLayoutChange: (reportScrollManager: ReportScrollManagerData, index: number) => (event: LayoutChangeEvent) => void; +}; + +export default ReportActionItemEventHandler; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index d3c8ca3af8de..1f16d4331e44 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -1,8 +1,8 @@ import lodashDebounce from 'lodash/debounce'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {InteractionManager, Keyboard, View} from 'react-native'; import type {NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputKeyPressEventData} from 'react-native'; +import {InteractionManager, Keyboard, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {Emoji} from '@assets/emojis/types'; import Composer from '@components/Composer'; @@ -29,6 +29,7 @@ import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete'; import {parseHtmlToMarkdown} from '@libs/OnyxAwareParser'; import onyxSubscribe from '@libs/onyxSubscribe'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; +import reportActionItemEventHandler from '@libs/ReportActionItemEventHandler'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware'; @@ -435,6 +436,7 @@ function ReportActionItemMessageEdit( } setShouldShowComposeInputKeyboardAware(true); }} + onLayout={reportActionItemEventHandler.handleComposerLayoutChange(reportScrollManager, index)} selection={selection} onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} isGroupPolicyReport={isGroupPolicyReport}