Form scrolls to top when clicking on a non-TextInput in React Native

[xxmuaddib]

A field has a View in it and a component which has a Touchable Opacity deep inside it. When I click on it Keyboard open, it doesn't get clicked and scrolls to top of the page. On keyboard hidden when I click on it it works as expected. Why does the form scrolls to top?

<Field
  control={addDishForm}
  render={({ get, invalid }) => (
    <KeyboardAwareScrollView
       keyboardShouldPersistTaps={true}>
         <Field
           control={get('name')}
           render={({ handler, touched, hasError }) => (
             <TextField
                {...handler()}
                ...other properties
              />
           )}
           />
           <Field
             control={get('dishType')}
             render={() => (
              <View style={styles.dietaryBoxes}>
                <DietaryBoxes dietaryInfo={value} onCheck={(s)=>this.generateArray(s)}/>
              </View>
            )}
          />
      </KeyboardAwareScrollView>
   )}
/>

DietaryBoxes component itself has several DietaryBox components and communicate with them using props. It works like this through props: MainComponent->DietaryBoxes->DietaryBox->DietaryBoxes->MainComponent

It seems that the form thinks that an outside click was detected and some validation works and that is why it is scrolling to top. If so, is there a way to turn this feature off for a selected field (or for entire form)?

[bietkul]

Hey, It's hard to replicate this issue. Can you share a reproducible demo?

[bietkul]

It seems like this issue is not active anymore. Feel free to re-open it.