keyboard not hiding on country code select

[quteboy]

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:

1. 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.
2. 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}

          <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);
            }}
     />

`

[GeorgeHop]

Hi! I will check it as soon as possible

[androidmasterid]

****** KEYBOARD HIDE PROBLEM SOLUTION **********

If your CountryPicker component is wrapped in a scrollable component, make sure to add keyboardShouldPersistTaps="always" to the parent ScrollView. This ensures that taps on the CountryPicker or other components inside the ScrollView do not dismiss the keyboard.

Example:
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="always" // Add this to persist keyboard state

{/* Your components */}
<CountryPicker
show={showCodePicker}
lang="en"
onBackdropPress={() => setShowCodePicker(false)}
pickerButtonOnPress={handleCountrySelect}
style={{
modal: {
alignSelf: "center",
justifyContent: "center",
height: 500,
},
}}
/>