From f1850ecb1a690765ce1b18b6079b055a73dec58d Mon Sep 17 00:00:00 2001
From: embbnux <embbnux@embbnux.com>
Date: Fri, 4 Aug 2017 10:16:43 +0800
Subject: [PATCH] not allow to input invalid char

---
 src/components/RegionSettingsPanel/index.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/RegionSettingsPanel/index.js b/src/components/RegionSettingsPanel/index.js
index d06ca65631..2f9c677189 100644
--- a/src/components/RegionSettingsPanel/index.js
+++ b/src/components/RegionSettingsPanel/index.js
@@ -35,14 +35,14 @@ export default class RegionSettings extends Component {
       });
     }
   }
+
   onAreaCodeChange = (e) => {
-    const value = e.currentTarget.value.replace(/[^\d]/g, '');
-    if (value !== this.state.areaCodeValue) {
-      this.setState({
-        areaCodeValue: value,
-      });
-    }
+    const value = e.currentTarget.value;
+    this.setState({
+      areaCodeValue: this.areaCodeInputFilter(value),
+    });
   }
+
   onCountryCodeChange = (option) => {
     const value = option.isoCode;
     if (value !== this.state.countryCodeValue) {
@@ -70,6 +70,10 @@ export default class RegionSettings extends Component {
       this.props.onBackButtonClick();
     }
   }
+
+  areaCodeInputFilter = value =>
+    value.replace(/[^\d]/g, '')
+
   renderHandler = option =>
     `(+${option.callingCode}) ${countryNames.getString(option.isoCode, this.props.currentLocale)}`
 
@@ -144,6 +148,7 @@ export default class RegionSettings extends Component {
               <TextInput
                 placeholder={i18n.getString('areaCodePlaceholder', this.props.currentLocale)}
                 maxLength={3}
+                filter={this.areaCodeInputFilter}
                 value={this.state.areaCodeValue}
                 onChange={this.onAreaCodeChange} />
             </InputField>