react-native-country-codes-picker icon indicating copy to clipboard operation
react-native-country-codes-picker copied to clipboard

keyboard not hiding on country code select

Open quteboy opened this issue 1 year ago • 1 comments

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

`

quteboy avatar Nov 02 '23 12:11 quteboy

Hi! I will check it as soon as possible

GeorgeHop avatar Jan 12 '24 10:01 GeorgeHop