diff --git a/README.md b/README.md index a04103cc..f32737ba 100644 --- a/README.md +++ b/README.md @@ -151,21 +151,30 @@ import 'react-phone-input-2/lib/style.css' ``` ### Contents -- [Style](#style) -- [Events](#events) -- [Regions](#regions) -- [Localization](#predefined-localization) -- [Local area codes](#local-area-codes) -- [Custom masks](#custom-masks) -- [Custom area codes](#custom-area-codes) -- [Other props](#other-props) -- [Custom localization](#custom-localization) -- [Guides](#guides) - - [Phone without dialCode](#phone-without-dialcode) - - [Check validity of the phone number](#check-validity-of-the-phone-number) - - [CDN](#cdn) -- [Contributing](#contributing) -- [Support](https://www.paypal.me/bloomber/20) +- [React-Phone-Input-2](#react-phone-input-2) + - [Installation](#installation) + - [Usage](#usage) + - [Demo 1 (UI) - [Demo 2 (CSS)](https://bl00mber.github.io/react-phone-input-2-css.html)](#demo-1-ui---demo-2-css) + - [Options](#options) + - [Contents](#contents) + - [Style](#style) + - [Events](#events) + - [Regions](#regions) + - [Predefined localization](#predefined-localization) + - [Local area codes](#local-area-codes) + - [Flexible mask](#flexible-mask) + - [Custom masks](#custom-masks) + - [Custom area codes](#custom-area-codes) + - [Other props](#other-props) + - [Custom localization](#custom-localization) + - [Preserve countries order](#preserve-countries-order) + - [Guides](#guides) + - [Phone without dialCode](#phone-without-dialcode) + - [Check validity of the phone number](#check-validity-of-the-phone-number) + - [Clear country](#clear-country) + - [CDN](#cdn) + - [Contributing](#contributing) + - [License](#license) ### Style @@ -405,6 +414,10 @@ Example: `+61 (2), +61 (02)` + + + +
disableCountryGuess false
clearSearch false
### Custom localization diff --git a/src/index.js b/src/index.js index 6ebfc56a..3914ca80 100644 --- a/src/index.js +++ b/src/index.js @@ -60,6 +60,7 @@ class PhoneInput extends React.Component { disableSearchIcon: PropTypes.bool, disableInitialCountryGuess: PropTypes.bool, disableCountryGuess: PropTypes.bool, + clearSearch: PropTypes.bool, regions: PropTypes.oneOfType([ PropTypes.string, @@ -136,6 +137,7 @@ class PhoneInput extends React.Component { disableSearchIcon: false, disableInitialCountryGuess: false, disableCountryGuess: false, + clearSearch: false, regions: '', @@ -616,6 +618,7 @@ class PhoneInput extends React.Component { formattedNumber }, () => { this.cursorToEnd(); + if(this.props.clearSearch) this.setState({searchValue: ''}) if (this.props.onChange) this.props.onChange(formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e, formattedNumber); }); } diff --git a/test/ReactPhoneInput.test.js b/test/ReactPhoneInput.test.js index 1b291e0f..1093329a 100644 --- a/test/ReactPhoneInput.test.js +++ b/test/ReactPhoneInput.test.js @@ -159,6 +159,21 @@ describe(' other props', () => { fireEvent.change(phoneInput.querySelector('.search-box'), {target: {value: 'undefined'}}) expect(phoneInput.querySelector('.no-entries-message')).toBeTruthy() }) + + test('clear search value after country selection', () => { + const { container: phoneInput } = render( + ) + + fireEvent.click(phoneInput.querySelector('.selected-flag')) + fireEvent.change(phoneInput.querySelector('.search-box'), {target: {value: 'gb'}}) + expect(phoneInput.querySelector('.country-list').children.length).toBe(2) // search field & 1 search result + fireEvent.click(phoneInput.querySelector('.country-list').children[1]) + fireEvent.click(phoneInput.querySelector('.selected-flag')) + expect(phoneInput.querySelector('.search-box').value).toBe('') + }) })