Add property to clear the search field once a country has been selected

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
 <table>
@@ -405,6 +414,10 @@ Example: `+61 (2), +61 (02)`
     <td> disableCountryGuess </td>
     <td> false </td>
   </tr>
+  <tr>
+    <td> clearSearch </td>
+    <td> false </td>
+  </tr>
 </table>
 
 ### Custom localization

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

test/ReactPhoneInput.test.js

@@ -159,6 +159,21 @@ describe('<PhoneInput /> 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(
+      <PhoneInput
+        enableSearch
+        clearSearch
+      />)
+
+    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('')
+  })
 })