Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

keyboard not hiding on country code select #76

Open
quteboy opened this issue Nov 2, 2023 · 1 comment
Open

keyboard not hiding on country code select #76

quteboy opened this issue Nov 2, 2023 · 1 comment

Comments

@quteboy
Copy link

quteboy commented Nov 2, 2023

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
Copy link
Owner

Hi! I will check it as soon as possible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants