react-native-country-codes-picker
react-native-country-codes-picker copied to clipboard
keyboard not hiding on country code select
Greetings,
I'm currently using the CountryPicker in our project, and it's generally functioning as expected. However, there's a specific scenario that requires attention. Here's how it plays out:
- Upon clicking the button, the CountryPicker opens, and the list of countries populates. I can select my preferred country code by clicking on an item from the list.
- After making a selection, the CountryPicker modal is dismissed or hidden.
The issue arises when I click on the input box to search for a country among the available options. When I click on an item in the list that appears after the search, there's an unexpected behavior. On the first click, the keyboard gets dismissed, and I need to click again to select the desired country. This means I have to click twice to make a country selection.
This behavior is somewhat cumbersome and could benefit from a smoother interaction. We appreciate your attention to this matter as it affects the usability of the CountryPicker component. Thank you for considering this feedback.
here is the code ` const handlePickerPress = item => { setCountryCode(item.dial_code); setFlag(item.flag); setShow(false); Keyboard.dismiss(); if (onPress) { onPress(item); } }; <TouchableOpacity onPress={() => setShow(true)} style={{ alignSelf: 'center', }}> <Text style={{ color: '#1b1212', fontSize: 14, marginRight: 10, marginLeft: 10, }}> {countryCode} </Text> </TouchableOpacity>
<CountryPicker
searchMessage={'Search here'}
show={show}
style={{
// Styles for whole modal [View]
modal: {
height: 425,
//backgroundColor: 'red',
},
// Styles for modal backdrop [View]
backdrop: {
backgroundColor: 'transparent',
},
textInput: {
height: 45,
//borderRadius: 20,
color: '#1b1212',
},
countryName: {
color: '#1b1212',
fontFamily: 'Mont-Regular',
lineHeight: 16,
fontSize: 14,
},
dialCode: {
color: '#1b1212',
fontFamily: 'Mont-Regular',
lineHeight: 16,
fontSize: 14,
},
countryButtonStyles: {
height: 50,
//backgroundColor:'#f3f3f3'
},
}}
pickerButtonOnPress={handlePickerPress}
onRequestClose={() => {
setShow(false);
}}
/>
`
Hi! I will check it as soon as possible