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

@@ -56,10 +56,16 @@ 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 */
+    /** 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 */
+    /** 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,
@@ -73,7 +79,7 @@ const defaultProps = {
     },
     draftValues: {},
     enabledWhenOffline: false,
-    isDangerousAction: false,
+    isSubmitActionDangerous: false,
     scrollToOverflowEnabled: false,
     scrollContextEnabled: false,
 };
@@ -287,12 +293,12 @@ class Form extends React.Component {
 
                         // We subtract 10 to scroll slightly above the input
                         if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
-                            focusInput.measureLayout(this.formRef.current, (x, y) => this.formRef.current.scrollTo({y: y - 10, animated: false}));
+                            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}
-                    isDangerousAction={this.props.isDangerousAction}
+                    isSubmitActionDangerous={this.props.isSubmitActionDangerous}
                 />
                 )}
             </View>

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/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}