Open felipecock opened 3 years ago
The drop-down menu overflows the screen when the list has several options, making the last ones impossible to select. (It has been tested in Android with and without the bottom system navigation bar)
There is an example to easily reproduce this bug:
import React from 'react' import {View, StyleSheet, ScrollView, Text} from 'react-native' import {FormBuilder} from 'react-native-paper-form-builder' import {useForm} from 'react-hook-form' import {Button} from 'react-native-paper' function Test1Screen() { const {control, setFocus, handleSubmit} = useForm({ defaultValues: { email: '', password: '', }, mode: 'onChange', }) return ( <View style={styles.containerStyle}> <ScrollView contentContainerStyle={styles.scrollViewStyle}> <Text style={styles.headingStyle}>Form Builder Basic Demo</Text> <FormBuilder control={control} setFocus={setFocus} formConfigArray={[ { type: 'select', name: 'select', rules: { required: { value: true, message: 'Fruit is required', }, }, textInputProps: { label: 'Favorite fruit', }, options: [ { value: 'Banana', label: 'Banana', }, { value: 'Mango', label: 'Mango', }, { value: 'Strawberry', label: 'Strawberry', }, { value: 'Pineapple', label: 'Pineapple', }, { value: 'Grape', label: 'Grape', }, { value: 'Apple', label: 'Apple', }, { value: 'Starfruit', label: 'Starfruit', }, { value: 'Blackberry', label: 'Blackberry', }, { value: 'Orange', label: 'Orange', }, { value: 'Watermelon', label: 'Watermelon', }, { value: 'Coconut', label: 'Coconut', }, { value: 'Peach', label: 'Peach', }, { value: 'Lemon', label: 'Lemon', }, ], }, ]} /> <Button mode={'contained'} onPress={handleSubmit((data: any) => { console.log('form data', data) })}> Submit </Button> </ScrollView> </View> ) } const styles = StyleSheet.create({ containerStyle: { flex: 1, }, scrollViewStyle: { flex: 1, padding: 15, justifyContent: 'center', }, headingStyle: { fontSize: 30, textAlign: 'center', marginBottom: 40, }, }) export default Test1Screen
The fully scrolled menu seems like:
Ok will look into this, for now i would suggest use of input type autocomplete to handle large data.
The drop-down menu overflows the screen when the list has several options, making the last ones impossible to select. (It has been tested in Android with and without the bottom system navigation bar)
There is an example to easily reproduce this bug:
The fully scrolled menu seems like: