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('')
+ })
})