From 0377b8355cdf8954e7fbd2b7e403bbc1e55bd370 Mon Sep 17 00:00:00 2001
From: hublot <hublot@aliyun.com>
Date: Mon, 21 Nov 2022 19:10:33 +0800
Subject: [PATCH] 9809_fix_scroll_conflict

---
 src/libs/WindowScroll/index.js        | 12 ++++++++++++
 src/libs/WindowScroll/index.native.js | 11 +++++++++++
 src/pages/NewChatPage.js              | 21 ++++++++++++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/libs/WindowScroll/index.js
 create mode 100644 src/libs/WindowScroll/index.native.js

diff --git a/src/libs/WindowScroll/index.js b/src/libs/WindowScroll/index.js
new file mode 100644
index 00000000000..00b59df17e3
--- /dev/null
+++ b/src/libs/WindowScroll/index.js
@@ -0,0 +1,12 @@
+/**
+ * Add a window document scroll listener if available. Return a function to remove the listener.
+ *
+ * @param {Function} onWindowScroll
+ * @returns {Function}
+ */
+function addWindowScrollListener(onWindowScroll) {
+    window.addEventListener('scroll', onWindowScroll);
+    return () => window.removeEventListener('scroll', onWindowScroll);
+}
+
+export default addWindowScrollListener;
diff --git a/src/libs/WindowScroll/index.native.js b/src/libs/WindowScroll/index.native.js
new file mode 100644
index 00000000000..145cff4b432
--- /dev/null
+++ b/src/libs/WindowScroll/index.native.js
@@ -0,0 +1,11 @@
+
+/**
+ * Window document scroll listener is not available on native, so return an empty function.
+ *
+ * @returns {Function}
+ */
+function addWindowScrollListener() {
+    return () => {};
+}
+
+export default addWindowScrollListener;
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 963ac5a9f52..c156838f5b2 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {View} from 'react-native';
+import {View,TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import OptionsSelector from '../components/OptionsSelector';
@@ -8,6 +8,8 @@ import * as OptionsListUtils from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import * as Report from '../libs/actions/Report';
+import addWindowScrollListener from '../libs/WindowScroll/'
+import * as Browser from '../libs/Browser/'
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
@@ -54,6 +56,11 @@ class NewChatPage extends Component {
         this.createChat = this.createChat.bind(this);
         this.createGroup = this.createGroup.bind(this);
         this.excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
+        if (Browser.isMobile() && Browser.getBrowser() == CONST.BROWSER.SAFARI) {
+        	this.followWindowScrollContainer = React.createRef()
+        	this.handlerWindowScroll = this.handlerWindowScroll.bind(this);
+        	this.removeWindowScrollListener = addWindowScrollListener(this.handlerWindowScroll)
+        }
 
         const {
             recentReports,
@@ -76,6 +83,14 @@ class NewChatPage extends Component {
         };
     }
 
+    componentWillUnmount() {
+    	this.removeWindowScrollListener()
+    }
+
+    handlerWindowScroll(e) {
+    	this.followWindowScrollContainer.current.style.top = `${-document.documentElement.scrollTop}pt`
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -206,7 +221,7 @@ class NewChatPage extends Component {
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    <>
+                    <View style={styles.flex1} ref={this.followWindowScrollContainer}>
                         <HeaderWithCloseButton
                             title={this.props.isGroupChat
                                 ? this.props.translate('sidebarScreen.newGroup')
@@ -252,7 +267,7 @@ class NewChatPage extends Component {
                                 />
                             )}
                         </View>
-                    </>
+                    </View>
                 )}
             </ScreenWrapper>
         );