Skip to content

Commit

Permalink
9809_fix_scroll_conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
hellohublot committed Nov 21, 2022
1 parent 4f33f1f commit 0377b83
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 3 deletions.
12 changes: 12 additions & 0 deletions src/libs/WindowScroll/index.js
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 11 additions & 0 deletions src/libs/WindowScroll/index.native.js
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 18 additions & 3 deletions src/pages/NewChatPage.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
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';
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';
Expand Down Expand Up @@ -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,
Expand All @@ -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
*
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -252,7 +267,7 @@ class NewChatPage extends Component {
/>
)}
</View>
</>
</View>
)}
</ScreenWrapper>
);
Expand Down

0 comments on commit 0377b83

Please sign in to comment.