Обработка нажатия на элемент при активном 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 рендерит иногда слишком большой список, который уходит за нижнюю часть экрана без возможности скролла, как исправить?


Ответы (0 шт):