Merge pull request #44354 from ishpaul777/fix/composer-scrolling-issue

fixes scroll issue in composer

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 {DeviceEventEmitter, StyleSheet, View} 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<number | undefined>();
+    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;