Fix for: mWeb/Chrome - Payment - The keyboard overlaps the "Make default payment method" button

src/components/Modal/BaseModal.js

@@ -77,6 +77,7 @@ class BaseModal extends PureComponent {
             },
             this.props.popoverAnchorPosition,
             this.props.containerStyle,
+            this.props.extraModalStyles,
         );
         return (
             <ReactNativeModal

src/components/PasswordPopover/BasePasswordPopover.js

@@ -11,6 +11,7 @@ import TextInput from '../TextInput';
 import KeyboardSpacer from '../KeyboardSpacer';
 import {propTypes as passwordPopoverPropTypes, defaultProps as passwordPopoverDefaultProps} from './passwordPopoverPropTypes';
 import Button from '../Button';
+import withViewportOffsetTop from '../withViewportOffsetTop';
 
 const propTypes = {
     /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
@@ -55,6 +56,7 @@ class BasePasswordPopover extends Component {
                 onClose={this.props.onClose}
                 anchorPosition={this.props.anchorPosition}
                 onModalShow={this.focusInput}
+                extraModalStyles={{maxHeight: this.props.windowHeight, marginTop: this.props.viewportOffsetTop}}
             >
                 <View
                     style={[
@@ -98,6 +100,7 @@ class BasePasswordPopover extends Component {
 BasePasswordPopover.propTypes = propTypes;
 BasePasswordPopover.defaultProps = defaultProps;
 export default compose(
+    withViewportOffsetTop,
     withWindowDimensions,
     withLocalize,
 )(BasePasswordPopover);

src/components/withViewportOffsetTop.js

@@ -0,0 +1,72 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+import addViewportResizeListener from '../libs/VisualViewport';
+
+const viewportOffsetTopPropTypes = {
+    // viewportOffsetTop returns the offset of the top edge of the visual viewport from the
+    // top edge of the layout viewport in CSS pixels, when the visual viewport is resized.
+
+    viewportOffsetTop: PropTypes.number.isRequired,
+};
+
+export default function (WrappedComponent) {
+    class WithViewportOffsetTop extends Component {
+        constructor(props) {
+            super(props);
+
+            this.updateDimensions = this.updateDimensions.bind(this);
+
+            this.state = {
+                viewportOffsetTop: 0,
+            };
+        }
+
+        componentDidMount() {
+            this.removeViewportResizeListener = addViewportResizeListener(this.updateDimensions);
+        }
+
+        componentWillUnmount() {
+            this.removeViewportResizeListener();
+        }
+
+        /**
+         * @param {SyntheticEvent} e
+         */
+        updateDimensions(e) {
+            const viewportOffsetTop = lodashGet(e, 'target.offsetTop', 0);
+            this.setState({viewportOffsetTop});
+        }
+
+        render() {
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
+                    ref={this.props.forwardedRef}
+                    viewportOffsetTop={this.state.viewportOffsetTop}
+                />
+            );
+        }
+    }
+
+    WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent)})`;
+    WithViewportOffsetTop.propTypes = {
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+    };
+    WithViewportOffsetTop.defaultProps = {
+        forwardedRef: undefined,
+    };
+    return React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithViewportOffsetTop {...props} forwardedRef={ref} />
+    ));
+}
+
+export {
+    viewportOffsetTopPropTypes,
+};

src/pages/home/ReportScreen.js

@@ -20,7 +20,6 @@ import CONST from '../../CONST';
 import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonView';
 import reportActionPropTypes from './report/reportActionPropTypes';
 import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
-import addViewportResizeListener from '../../libs/VisualViewport';
 import {withNetwork} from '../../components/OnyxProvider';
 import compose from '../../libs/compose';
 import networkPropTypes from '../../components/networkPropTypes';
@@ -33,6 +32,7 @@ import withLocalize from '../../components/withLocalize';
 import reportPropTypes from '../reportPropTypes';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView';
+import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -73,6 +73,7 @@ const propTypes = {
 
     ...windowDimensionsPropTypes,
     ...withDrawerPropTypes,
+    ...viewportOffsetTopPropTypes,
 };
 
 const defaultProps = {
@@ -107,22 +108,18 @@ class ReportScreen extends React.Component {
         super(props);
 
         this.onSubmitComment = this.onSubmitComment.bind(this);
-        this.updateViewportOffsetTop = this.updateViewportOffsetTop.bind(this);
         this.chatWithAccountManager = this.chatWithAccountManager.bind(this);
         this.dismissBanner = this.dismissBanner.bind(this);
-        this.removeViewportResizeListener = () => {};
 
         this.state = {
             skeletonViewContainerHeight: reportActionsListViewHeight,
-            viewportOffsetTop: 0,
             isBannerVisible: true,
         };
     }
 
     componentDidMount() {
         this.fetchReportIfNeeded();
         toggleReportActionComposeView(true);
-        this.removeViewportResizeListener = addViewportResizeListener(this.updateViewportOffsetTop);
     }
 
     componentDidUpdate(prevProps) {
@@ -134,10 +131,6 @@ class ReportScreen extends React.Component {
         toggleReportActionComposeView(true);
     }
 
-    componentWillUnmount() {
-        this.removeViewportResizeListener();
-    }
-
     /**
      * @param {String} text
      */
@@ -171,14 +164,6 @@ class ReportScreen extends React.Component {
         Report.openReport(reportIDFromPath);
     }
 
-    /**
-     * @param {SyntheticEvent} e
-     */
-    updateViewportOffsetTop(e) {
-        const viewportOffsetTop = lodashGet(e, 'target.offsetTop', 0);
-        this.setState({viewportOffsetTop});
-    }
-
     dismissBanner() {
         this.setState({isBannerVisible: false});
     }
@@ -214,7 +199,7 @@ class ReportScreen extends React.Component {
         const reportID = getReportID(this.props.route);
         const addWorkspaceRoomOrChatPendingAction = lodashGet(this.props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(this.props.report, 'pendingFields.createChat');
         const addWorkspaceRoomOrChatErrors = lodashGet(this.props.report, 'errorFields.addWorkspaceRoom') || lodashGet(this.props.report, 'errorFields.createChat');
-        const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: this.state.viewportOffsetTop}];
+        const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: this.props.viewportOffsetTop}];
 
         // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
         const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions;
@@ -332,6 +317,7 @@ ReportScreen.propTypes = propTypes;
 ReportScreen.defaultProps = defaultProps;
 
 export default compose(
+    withViewportOffsetTop,
     withLocalize,
     withWindowDimensions,
     withDrawerState,

src/styles/getModalStyles/getBaseModalStyles.js

@@ -2,11 +2,12 @@ import CONST from '../../CONST';
 import variables from '../variables';
 import themeColors from '../themes/default';
 
-export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => {
+export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}, extraModalStyles = {}) => {
     const {isSmallScreenWidth, windowWidth} = windowDimensions;
 
     let modalStyle = {
         margin: 0,
+        ...extraModalStyles,
     };
 
     let modalContainerStyle;