Merge pull request #13499 from Expensify/aldo_fix-scrolling-and-cente…

…ring-regression Use measureLayout to calculate scrolling
Expensify · Dec 12, 2022 · 7054f9c · 7054f9c
2 parents 10dd188 + 0c68fa6
commit 7054f9c
Showing 1 changed file with 6 additions and 27 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -79,7 +79,6 @@ class Form extends React.Component {
 
         this.inputRefs = {};
         this.touchedInputs = {};
-        this.childPosition = {};
 
         this.setTouchedInput = this.setTouchedInput.bind(this);
         this.validate = this.validate.bind(this);
@@ -109,21 +108,6 @@ class Form extends React.Component {
         return _.first(_.keys(hasStateErrors ? this.state.erorrs : this.props.formState.errorFields));
     }
 
-    setPosition(element, position) {
-        // Some elements might not have props defined, e.g. Text
-        if (!element.props) {
-            return;
-        }
-
-        if (!element.props.inputID && element.props.children) {
-            _.forEach(element.props.children, (child) => {
-                this.setPosition(child, position);
-            });
-        } else {
-            this.childPosition[element.props.inputID] = position;
-        }
-    }
-
     submit() {
         // Return early if the form is already submitting to avoid duplicate submission
         if (this.props.formState.isLoading) {
@@ -268,16 +252,7 @@ class Form extends React.Component {
                     ref={el => this.form = el}
                 >
                     <View style={[this.props.style]}>
-                        {_.map(this.childrenWrapperWithProps(this.props.children), child => (
-                            <View
-                                key={child.key}
-                                onLayout={(event) => {
-                                    this.setPosition(child, event.nativeEvent.layout.y);
-                                }}
-                            >
-                                {child}
-                            </View>
-                        ))}
+                        {this.childrenWrapperWithProps(this.props.children)}
                         {this.props.isSubmitButtonVisible && (
                         <FormAlertWithSubmitButton
                             buttonText={this.props.submitButtonText}
@@ -289,10 +264,14 @@ class Form extends React.Component {
                                 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];
-                                this.form.scrollTo({y: this.childPosition[focusKey], animated: false});
                                 if (focusInput.focus && typeof focusInput.focus === 'function') {
                                     focusInput.focus();
                                 }
+
+                                // We substract 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]}
                             enabledWhenOffline={this.props.enabledWhenOffline}