jlovoi
commented
3 years ago This has become a bit more involved with react-native's Keyboard as it seems that now the keyboard is dismissed by tapping the item before the item's onPress event occurs. Make sure to pass keyboardShouldPersistTaps: 'always' as a flatListProp. Then you will have to manually close the keyboard with Keyboard.dismiss() as part of the onPress function.
import React, { useState, useEffect } from 'react';
import { Keyboard, TextInput, View, Pressable } from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';
...
<Autocomplete
data={items}
hideResults={hideResults}
flatListProps={{
keyboardShouldPersistTaps: 'always',
keyExtractor: item => item.key,
renderItem: ({ item }) => (
<Pressable
key={item.key}
onPress={() => {
setQuery(item.label);
update(item.value);
Keyboard.dismiss();
}}
>
<View style={styles.item}>
<Text style={{ fontSize: 25 }}>{item.label}</Text>
</View>
</Pressable>
),
}}
defaultValue={defaultValue}
/>I also set up a keyboard listener to facilitate hiding results, as well as some other cleanup actions I have defined under onUnfocusAction:
const [hideResults, setHideResults] = useState(true);
useEffect(() => {
const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
setHideResults(true);
onUnfocusAction();
});
return () => {
hideSubscription.remove();
};
}, []);
haridevks
stale[bot]
Hi I am using the version 5.0.0 and in my state i have predefined the hide results as true, because i have passed an array as a data and it should display only when its pressed, which is working fine, and inorder to close the suggestion list , i put the onblur and set the state as true when it happens.... but now when i click on the items in list ....On press event is not working.
<Autocomplete clearButtonMode='always' autoCapitalize='none' autoCorrect={false} style={{fontSize:15,fontFamily:'Poppins-Regular',fontWeight:'300',}} inputContainerStyle={{borderWidth:0,borderColor:'transparent',width:'100%'}} listContainerStyle={{width:'100%',borderWidth:0}} listStyle={{width:'100%',borderWidth:0}} containerStyle={{backgroundColor:'#fff',borderWidth:0,borderRadius:15,width:'100%'}} data={this.state.categories} value={this.state.searchCategory} onChangeText={(searchcat1) => this.setState({searchCategory:searchcat1})} placeholder = 'Search Here for Category' placeholderTextColor='#b2b2b2' onFocus={() => this.setState({hideResults:false})} onBlur={() => this.setState({hideResults:true})} hideResults={this.state.hideResults} flatListProps={{ keyExtractor:(_,id) => id, renderItem:({item}) => ( <TouchableOpacity style={{width:'100%'}} onPress={()=> {this.setSelectedValue(item.id,item.name) }}> <Text style={{fontSize:15,paddingBottom:5,paddingTop:5,margin:2,color:'#000',fontFamily:'Poppins-Regular'}}> {item.name}