From cec5f5dd6533d43a5dbd203dc6cbe05c73995a7d Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 25 Jun 2024 03:31:13 +0530 Subject: [PATCH 1/2] fixes scroll issue in composer --- src/components/Composer/index.tsx | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 3a8a4e724948..684e1b2e68ac 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {flushSync} from 'react-dom'; // eslint-disable-next-line no-restricted-imports import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle} from 'react-native'; -import {StyleSheet, View} from 'react-native'; +import {StyleSheet, View, DeviceEventEmitter} from 'react-native'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; import Text from '@components/Text'; @@ -74,7 +74,7 @@ function Composer( }, isReportActionCompose = false, isComposerFullSize = false, - shouldContainScroll = false, + shouldContainScroll = true, isGroupPolicyReport = false, ...props }: ComposerProps, @@ -105,6 +105,7 @@ function Composer( const [isRendered, setIsRendered] = useState(false); const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? ''); const [prevScroll, setPrevScroll] = useState(); + const isReportFlatListScrolling = useRef(false); useEffect(() => { if (!shouldClear) { @@ -249,6 +250,29 @@ function Composer( }; }, []); + useEffect(() => { + const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => { + isReportFlatListScrolling.current = scrolling; + }); + + return () => scrollingListener.remove(); + }, []); + + useEffect(() => { + const handleWheel = (e: MouseEvent) => { + if (isReportFlatListScrolling.current) { + e.preventDefault(); + return; + } + e.stopPropagation(); + }; + textInput.current?.addEventListener('wheel', handleWheel, {passive: false}); + + return () => { + textInput.current?.removeEventListener('wheel', handleWheel); + }; + }, []); + useEffect(() => { if (!textInput.current || prevScroll === undefined) { return; From 696fbcaa41924b695d3fa5a1a66b04095ac862fc Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 25 Jun 2024 16:08:06 +0530 Subject: [PATCH 2/2] prettier diffs --- src/components/Composer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 684e1b2e68ac..f4a5174c2602 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {flushSync} from 'react-dom'; // eslint-disable-next-line no-restricted-imports import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle} from 'react-native'; -import {StyleSheet, View, DeviceEventEmitter} from 'react-native'; +import {DeviceEventEmitter, StyleSheet, View} from 'react-native'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; import Text from '@components/Text';