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

src/components/KeyboardShortcutsModal.js

@@ -79,7 +79,7 @@ class KeyboardShortcutsModal extends React.Component {
             <Modal
                 isVisible={this.props.isShortcutsModalOpen}
                 type={modalType}
-                containerStyle={{...styles.keyboardShortcutModalContainer, ...StyleUtils.getKeyboardShortcutsModalWidth(this.props.isSmallScreenWidth)}}
+                innerContainerStyle={{...styles.keyboardShortcutModalContainer, ...StyleUtils.getKeyboardShortcutsModalWidth(this.props.isSmallScreenWidth)}}
                 onClose={KeyboardShortcutsActions.hideKeyboardShortcutModal}
             >
                 <HeaderWithCloseButton title={this.props.translate('keyboardShortcutModal.title')} onCloseButtonPress={KeyboardShortcutsActions.hideKeyboardShortcutModal} />

src/components/Modal/BaseModal.js

@@ -76,7 +76,8 @@ class BaseModal extends PureComponent {
                 isSmallScreenWidth: this.props.isSmallScreenWidth,
             },
             this.props.popoverAnchorPosition,
-            this.props.containerStyle,
+            this.props.innerContainerStyle,
+            this.props.outerStyle,
         );
         return (
             <ReactNativeModal

src/components/Modal/modalPropTypes.js

@@ -56,7 +56,7 @@ const propTypes = {
     }),
 
     /** Modal container styles  */
-    containerStyle: stylePropTypes,
+    innerContainerStyle: stylePropTypes,
 
     /** Whether the modal should go under the system statusbar */
     statusBarTranslucent: PropTypes.bool,
@@ -75,7 +75,7 @@ const defaultProps = {
     animationIn: null,
     animationOut: null,
     popoverAnchorPosition: {},
-    containerStyle: {},
+    innerContainerStyle: {},
     statusBarTranslucent: true,
 };
 

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}
+                outerStyle={{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);
         Navigation.setIsReportScreenIsReady();
     }
 
@@ -135,10 +132,6 @@ class ReportScreen extends React.Component {
         toggleReportActionComposeView(true);
     }
 
-    componentWillUnmount() {
-        this.removeViewportResizeListener();
-    }
-
     /**
      * @param {String} text
      */
@@ -172,14 +165,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});
     }
@@ -206,7 +191,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;
@@ -324,6 +309,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 = {}, innerContainerStyle = {}, outerStyle = {}) => {
     const {isSmallScreenWidth, windowWidth} = windowDimensions;
 
     let modalStyle = {
         margin: 0,
+        ...outerStyle,
     };
 
     let modalContainerStyle;
@@ -213,7 +214,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             animationOut = 'slideOutDown';
     }
 
-    modalContainerStyle = {...modalContainerStyle, ...containerStyle};
+    modalContainerStyle = {...modalContainerStyle, ...innerContainerStyle};
 
     return {
         modalStyle,

src/styles/getModalStyles/index.android.js

@@ -1,8 +1,8 @@
 import getBaseModalStyles from './getBaseModalStyles';
 
 // Only apply top padding on iOS since it's the only platform using SafeAreaView
-export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => ({
-    ...getBaseModalStyles(type, windowDimensions, popoverAnchorPosition, containerStyle),
+export default (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}) => ({
+    ...getBaseModalStyles(type, windowDimensions, popoverAnchorPosition, innerContainerStyle),
     shouldAddTopSafeAreaMargin: false,
     shouldAddTopSafeAreaPadding: false,
 });