Fix: Scroll to picker regression

contributingGuides/FORMS.md

@@ -261,3 +261,19 @@ Any `Form.js` that has a button will also add safe area padding by default. If t
     </Form>
 </ScreenWrapper>
 ```
+
+### Handling Picker's in forms
+
+#### Enable ScrollContext
+
+In case there's a Picker nested in a ScrollView in the form we need to add one or two additional props to the `<Form />`.
+
+To enable "scrolling-up" behaviour when a `<Picker />` is pressed, we need to add the `scrollContextEnabled` prop and set it to `true`.
+
+This is because in this case, instead of a regular `ScrollView` the `<ScrollViewWithContext />` component will be used, so that a ref to the `ScrollView` and the current vertical scroll offset get passed to the picker over a context. The picker then handles scrolling up when it gets pressed.
+
+#### Enable scrolling to overflow
+
+Additionally to the section above, we can also enable the `scrollToOverflowEnabled` prop in case a there is a nested `<Picker />` component relatively far at the end of the ScrollView's content.
+
+In this case, the opening Picker modal would get rendered over the Picker. (tbs., over the `TextInput` rendered by the `Picker`). We can prevent this behaviour by enabling scrolling to overflow in the `ScrollView`.

src/components/Form.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -56,6 +56,18 @@ const propTypes = {
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
 
+    /** Defines wheter the overflow content of the form's ScrollView should be scrollable
+     *  Should be set to true, when there's a nested Picker component relatively at the end of
+     *  the ScrollView's content, so the opening Picker modal doesn't get rendered over the Picker
+     *  Example can be found here: https://github.com/Expensify/App/issues/13909#issuecomment-1396859008
+    */
+    scrollToOverflowEnabled: PropTypes.bool,
+
+    /** Defines wheter ScrollWithContext should be used instead of regular ScrollView
+     *  Should be set to true, when there's a nested Picker component in the ScrollView's children
+    */
+    scrollContextEnabled: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -68,6 +80,8 @@ const defaultProps = {
     draftValues: {},
     enabledWhenOffline: false,
     isSubmitActionDangerous: false,
+    scrollToOverflowEnabled: false,
+    scrollContextEnabled: false,
 };
 
 class Form extends React.Component {
@@ -79,6 +93,7 @@ class Form extends React.Component {
             inputValues: {},
         };
 
+        this.formRef = React.createRef(null);
         this.inputRefs = {};
         this.touchedInputs = {};
 
@@ -258,45 +273,60 @@ class Form extends React.Component {
     }
 
     render() {
+        const scrollViewContent = safeAreaPaddingBottomStyle => (
+            <View style={[this.props.style, safeAreaPaddingBottomStyle]}>
+                {this.childrenWrapperWithProps(this.props.children)}
+                {this.props.isSubmitButtonVisible && (
+                <FormAlertWithSubmitButton
+                    buttonText={this.props.submitButtonText}
+                    isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.getErrorMessage()) || !_.isEmpty(this.props.formState.errorFields)}
+                    isLoading={this.props.formState.isLoading}
+                    message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}
+                    onSubmit={this.submit}
+                    onFixTheErrorsLinkPressed={() => {
+                        const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
+                        const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
+                        const focusInput = this.inputRefs[focusKey];
+                        if (focusInput.focus && typeof focusInput.focus === 'function') {
+                            focusInput.focus();
+                        }
+
+                        // We subtract 10 to scroll slightly above the input
+                        if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
+                            focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
+                        }
+                    }}
+                    containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
+                    enabledWhenOffline={this.props.enabledWhenOffline}
+                    isSubmitActionDangerous={this.props.isSubmitActionDangerous}
+                />
+                )}
+            </View>
+        );
+
         return (
             <SafeAreaConsumer>
-                {({safeAreaPaddingBottomStyle}) => (
+                {({safeAreaPaddingBottomStyle}) => (this.props.scrollContextEnabled ? (
                     <ScrollViewWithContext
                         style={[styles.w100, styles.flex1]}
                         contentContainerStyle={styles.flexGrow1}
                         keyboardShouldPersistTaps="handled"
-                        ref={el => this.form = el}
+                        scrollToOverflowEnabled={this.props.scrollToOverflowEnabled}
+                        ref={this.formRef}
                     >
-                        <View style={[this.props.style, safeAreaPaddingBottomStyle]}>
-                            {this.childrenWrapperWithProps(this.props.children)}
-                            {this.props.isSubmitButtonVisible && (
-                            <FormAlertWithSubmitButton
-                                buttonText={this.props.submitButtonText}
-                                isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.getErrorMessage()) || !_.isEmpty(this.props.formState.errorFields)}
-                                isLoading={this.props.formState.isLoading}
-                                message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}
-                                onSubmit={this.submit}
-                                onFixTheErrorsLinkPressed={() => {
-                                    const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
-                                    const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
-                                    const focusInput = this.inputRefs[focusKey];
-                                    if (focusInput.focus && typeof focusInput.focus === 'function') {
-                                        focusInput.focus();
-                                    }
-
-                                    // We subtract 10 to scroll slightly above the input
-                                    if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
-                                        focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
-                                    }
-                                }}
-                                containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
-                                enabledWhenOffline={this.props.enabledWhenOffline}
-                                isSubmitActionDangerous={this.props.isSubmitActionDangerous}
-                            />
-                            )}
-                        </View>
+                        {scrollViewContent(safeAreaPaddingBottomStyle)}
                     </ScrollViewWithContext>
-                )}
+                ) : (
+                    <ScrollView
+                        style={[styles.w100, styles.flex1]}
+                        contentContainerStyle={styles.flexGrow1}
+                        keyboardShouldPersistTaps="handled"
+                        scrollToOverflowEnabled={this.props.scrollToOverflowEnabled}
+                        ref={this.formRef}
+                    >
+                        {scrollViewContent(safeAreaPaddingBottomStyle)}
+                    </ScrollView>
+                ))}
             </SafeAreaConsumer>
         );
     }

src/components/ScrollViewWithContext.js

@@ -22,7 +22,7 @@ class ScrollViewWithContext extends React.Component {
         this.state = {
             contentOffsetY: 0,
         };
-        this.scrollViewRef = React.createRef(null);
+        this.scrollViewRef = this.props.innerRef || React.createRef(null);
 
         this.setContextScrollPosition = this.setContextScrollPosition.bind(this);
     }
@@ -42,7 +42,6 @@ class ScrollViewWithContext extends React.Component {
                 ref={this.scrollViewRef}
                 onScroll={this.setContextScrollPosition}
                 scrollEventThrottle={this.props.scrollEventThrottle || MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
-                scrollToOverflowEnabled
             >
                 <ScrollContext.Provider
                     value={{
@@ -58,7 +57,11 @@ class ScrollViewWithContext extends React.Component {
 }
 ScrollViewWithContext.propTypes = propTypes;
 
-export default ScrollViewWithContext;
+export default React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <ScrollViewWithContext {...props} innerRef={ref} />
+));
+
 export {
     ScrollContext,
 };

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -225,6 +225,8 @@ class AdditionalDetailsStep extends React.Component {
                         formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
                         validate={this.validate}
                         onSubmit={this.activateWallet}
+                        scrollContextEnabled
+                        scrollToOverflowEnabled
                         submitButtonText={this.props.translate('common.saveAndContinue')}
                         style={[styles.mh5, styles.flexGrow1]}
                     >

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

@@ -79,6 +79,7 @@ class BankAccountPlaidStep extends React.Component {
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
                     validate={() => ({})}
                     onSubmit={this.submit}
+                    scrollContextEnabled
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}

src/pages/ReimbursementAccount/CompanyStep.js

@@ -151,6 +151,8 @@ class CompanyStep extends React.Component {
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
                     validate={this.validate}
                     onSubmit={this.submit}
+                    scrollContextEnabled
+                    scrollToOverflowEnabled
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.ph5, styles.flexGrow1]}
                 >

src/pages/ReportSettingsPage.js

@@ -128,6 +128,7 @@ class ReportSettingsPage extends Component {
                     style={[styles.mh5, styles.mt5, styles.flexGrow1]}
                     validate={this.validate}
                     onSubmit={this.updatePolicyRoomName}
+                    scrollContextEnabled
                     isSubmitButtonVisible={shouldShowRoomName && !shouldDisableRename}
                     enabledWhenOffline
                 >

src/pages/settings/Payments/AddDebitCardPage.js

@@ -120,6 +120,8 @@ class DebitCardPage extends Component {
                     validate={this.validate}
                     onSubmit={PaymentMethods.addPaymentCard}
                     submitButtonText={this.props.translate('common.save')}
+                    scrollContextEnabled
+                    scrollToOverflowEnabled
                     style={[styles.mh5, styles.flexGrow1]}
                 >
                     <TextInput

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -131,6 +131,7 @@ class WorkspaceNewRoomPage extends React.Component {
                 <Form
                     formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                     submitButtonText={this.props.translate('newRoomPage.createRoom')}
+                    scrollContextEnabled
                     style={[styles.mh5, styles.mt5, styles.flexGrow1]}
                     validate={this.validate}
                     onSubmit={this.submit}