Обработка нажатия на элемент при активном TextInput
Написал небольшой компонент с выпадающим меню:
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}
>
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Поиск...'
placeholderTextColor='#888'
value={searchQuery}
onChangeText={setSearchQuery}
onPressIn={() => setIsFocused(true)}
/>
<FlatList
style={[
styles.dropDown,
isFocused && slicedFilteredNomenclature.length > 0
? styles.dropDownOpen
: null,
]}
data={slicedFilteredNomenclature}
keyExtractor={(item: arrayItem) => item.article}
renderItem={renderItem}
/>
</View>
</KeyboardAvoidingView>
const renderItem = useCallback(
({ item }: { item: arrayItemlabel }) => (
// <View style={styles.listItem}>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
style={styles.listItem}
>
<Text onPress={() => alert(1)}>{item.label}</Text>
</TouchableWithoutFeedback>
// </View>
),
[handlerSubmit]
);
const handlerSubmit = useCallback((i: any) => {
console.log(i);
setSearchQuery(i.label);
setIsFocused(false);
}, []);
В процессе возникли два вопроса. Первый и главный, как произвести обработку onPress, игнорируя активный фокус на инпуте и открытую клавиатуру? Второй вопрос, компонента FlatList рендерит иногда слишком большой список, который уходит за нижнюю часть экрана без возможности скролла, как исправить?