diff --git a/src/components/Form.js b/src/components/Form.js index 34199bd4f443..dfdfc24a7eae 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -79,6 +79,7 @@ class Form extends React.Component { this.inputRefs = {}; this.touchedInputs = {}; + this.childPosition = {}; this.setTouchedInput = this.setTouchedInput.bind(this); this.validate = this.validate.bind(this); @@ -108,6 +109,16 @@ class Form extends React.Component { return _.first(_.keys(hasStateErrors ? this.state.erorrs : this.props.formState.errorFields)); } + setPosition(element, position) { + 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) { @@ -249,9 +260,18 @@ class Form extends React.Component { style={[styles.w100, styles.flex1]} contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="handled" + ref={el => this.form = el} > - {this.childrenWrapperWithProps(this.props.children)} + {_.map(this.childrenWrapperWithProps(this.props.children), child => ( + { + this.setPosition(child, event.nativeEvent.layout.y); + }} + > + {child} + + ))} {this.props.isSubmitButtonVisible && ( _.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(); }