From 25f2f61115318af9f8527b5114e83355bf543081 Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 10:19:41 +0700
Subject: [PATCH 1/6] Update cursor pointer

When I typing in input, I got wrong cursor pointer position. I fixed it.
---
 src/components/IntlTelInput.js | 16 +++++++++++-----
 src/components/RootModal.js    | 24 ++++++++++++++----------
 src/components/TelInput.js     |  2 --
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/IntlTelInput.js b/src/components/IntlTelInput.js
index 03ec81a01..2cb528608 100644
--- a/src/components/IntlTelInput.js
+++ b/src/components/IntlTelInput.js
@@ -24,7 +24,7 @@ class IntlTelInput extends Component {
       };
     }
 
-    if (prevState.disabled !== nextProps.disabled) {
+    if (nextProps.disabled && prevState.disabled !== nextProps.disabled) {
       newState = {
         disabled: nextProps.disabled,
       };
@@ -151,6 +151,9 @@ class IntlTelInput extends Component {
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
       this.updateFlagFromNumber(this.props.value);
+	  this.updateCursorPosition(		
+        (this.props.value || this.props.defaultValue).length		
+      );
     }
 
     if (
@@ -159,10 +162,6 @@ class IntlTelInput extends Component {
     ) {
       this.updatePlaceholder(this.props);
     }
-
-    if (this.props.allowDropdown !== prevProps.allowDropdown) {
-      this.allowDropdown = this.props.allowDropdown;
-    }
   }
 
   componentWillUnmount() {
@@ -684,6 +683,12 @@ class IntlTelInput extends Component {
     return number;
   };
 
+  updateCursorPosition = cursorPosition => {		
+    this.setState({		
+      cursorPosition		
+    });		
+  };
+  
   // update the input's value to the given val (format first if possible)
   // if doNotify is true, calls notifyPhoneNumberChange with the formatted value
   // NOTE: this is called from _setInitialState, handleUtils and setNumber
@@ -999,6 +1004,7 @@ class IntlTelInput extends Component {
   };
 
   generateMarkup = () => {
+	this.wrapperClass['allow-dropdown'] = this.allowDropdown;
     this.wrapperClass['separate-dial-code'] = this.props.separateDialCode;
 
     if (this.isMobile && this.props.useMobileFullscreenDropdown) {
diff --git a/src/components/RootModal.js b/src/components/RootModal.js
index 58aa98be4..11fc227e2 100644
--- a/src/components/RootModal.js
+++ b/src/components/RootModal.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
@@ -7,25 +7,29 @@ export default class RootModal extends Component {
     children: PropTypes.node,
   };
 
-  constructor(props) {
-    super(props);
-
+  componentDidMount() {
     this.modalTarget = document.createElement('div');
     this.modalTarget.className = 'intl-tel-input iti-container';
+    document.body.appendChild(this.modalTarget);
+    this._render();
   }
 
-  componentDidMount() {
-    document.body.appendChild(this.modalTarget);
+  shouldComponentUpdate() {
+    this._render();
+
+    return false;
   }
 
   componentWillUnmount() {
+    ReactDOM.unmountComponentAtNode(this.modalTarget);
     document.body.removeChild(this.modalTarget);
   }
 
+  _render() {
+    ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
+  }
+
   render() {
-    return ReactDOM.createPortal(
-      <Fragment>{this.props.children}</Fragment>,
-      this.modalTarget
-    );
+    return <noscript />;
   }
 }
diff --git a/src/components/TelInput.js b/src/components/TelInput.js
index 26284c2f5..c79f02c60 100644
--- a/src/components/TelInput.js
+++ b/src/components/TelInput.js
@@ -25,12 +25,10 @@ export default class TelInput extends Component {
   };
 
   componentDidUpdate() {
-    if (this.state.hasFocus) {
       this.tel.setSelectionRange(
         this.props.cursorPosition,
         this.props.cursorPosition
       );
-    }
   }
 
   refHandler = element => {

From 3be2ec273c736213b00b0872d6da5a4419417ea2 Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 11:09:01 +0700
Subject: [PATCH 2/6] Fix alert

1 for Unused or undefined state property
---
 src/components/TelInput.js | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/TelInput.js b/src/components/TelInput.js
index c79f02c60..b9baba655 100644
--- a/src/components/TelInput.js
+++ b/src/components/TelInput.js
@@ -17,18 +17,14 @@ export default class TelInput extends Component {
     autoComplete: PropTypes.string,
     inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     refCallback: PropTypes.func.isRequired,
-    cursorPosition: PropTypes.number,
-  };
-
-  state = {
-    hasFocus: false,
+    cursorPosition: PropTypes.number
   };
 
   componentDidUpdate() {
-      this.tel.setSelectionRange(
-        this.props.cursorPosition,
-        this.props.cursorPosition
-      );
+    this.tel.setSelectionRange(
+      this.props.cursorPosition,
+      this.props.cursorPosition
+    );
   }
 
   refHandler = element => {
@@ -37,16 +33,12 @@ export default class TelInput extends Component {
   };
 
   handleBlur = e => {
-    this.setState({ hasFocus: false });
-
     if (typeof this.props.handleOnBlur === 'function') {
       this.props.handleOnBlur(e);
     }
   };
 
-  handleFocus = () => {
-    this.setState({ hasFocus: true });
-  };
+  handleFocus = () => {};
 
   handlePaste = e => {
     if (typeof this.props.handlePaste === 'function') {

From 7273c52cdeee69b894892741b9b3919d00141cb5 Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 11:20:10 +0700
Subject: [PATCH 3/6] Fixed alert

For Unused or undefined state property
---
 src/components/IntlTelInput.js | 97 +++++++++++++++-------------------
 1 file changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/components/IntlTelInput.js b/src/components/IntlTelInput.js
index 2cb528608..0cbbe1103 100644
--- a/src/components/IntlTelInput.js
+++ b/src/components/IntlTelInput.js
@@ -20,13 +20,13 @@ class IntlTelInput extends Component {
       prevState.value !== nextProps.value
     ) {
       newState = {
-        value: nextProps.value,
+        value: nextProps.value
       };
     }
 
     if (nextProps.disabled && prevState.disabled !== nextProps.disabled) {
       newState = {
-        disabled: nextProps.disabled,
+        disabled: nextProps.disabled
       };
     }
 
@@ -65,7 +65,7 @@ class IntlTelInput extends Component {
       A: 65,
       Z: 90,
       SPACE: 32,
-      TAB: 9,
+      TAB: 9
     };
 
     this.query = '';
@@ -80,10 +80,9 @@ class IntlTelInput extends Component {
       offsetTop: 0,
       outerHeight: 0,
       placeholder: '',
-      title: '', // eslint-disable-line react/no-unused-state
       countryCode: 'us',
       dialCode: '',
-      cursorPosition: (props.value || props.defaultValue).length,
+      cursorPosition: (props.value || props.defaultValue).length
     };
   }
 
@@ -151,8 +150,8 @@ class IntlTelInput extends Component {
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
       this.updateFlagFromNumber(this.props.value);
-	  this.updateCursorPosition(		
-        (this.props.value || this.props.defaultValue).length		
+      this.updateCursorPosition(
+        (this.props.value || this.props.defaultValue).length
       );
     }
 
@@ -220,12 +219,12 @@ class IntlTelInput extends Component {
     // do this first as it will throw an error and stop if countryCode is invalid
     this.selectedCountryData = countryCode
       ? utils.getCountryData(
-        this.countries,
-        countryCode,
-        false,
-        false,
-        this.props.noCountryDataHandler
-      )
+          this.countries,
+          countryCode,
+          false,
+          false,
+          this.props.noCountryDataHandler
+        )
       : {};
 
     // update the defaultCountry - we only need the iso2 from now on, so just store that
@@ -233,13 +232,6 @@ class IntlTelInput extends Component {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
 
-    // update the selected country's title attribute
-    const title = countryCode
-      ? `${this.selectedCountryData.name}: +${
-        this.selectedCountryData.dialCode
-      }`
-      : 'Unknown';
-
     let dialCode = this.state.dialCode; // eslint-disable-line react/no-access-state-in-setstate
 
     if (this.props.separateDialCode) {
@@ -289,8 +281,7 @@ class IntlTelInput extends Component {
         showDropdown: false,
         highlightedCountry: selectedIndex,
         countryCode,
-        title, // eslint-disable-line react/no-unused-state
-        dialCode,
+        dialCode
       },
       () => {
         // and the input's placeholder
@@ -497,7 +488,7 @@ class IntlTelInput extends Component {
         !this.props.separateDialCode
       ) {
         this.setState({
-          value: `+${this.selectedCountryData.dialCode}`,
+          value: `+${this.selectedCountryData.dialCode}`
         });
       }
     }
@@ -582,7 +573,7 @@ class IntlTelInput extends Component {
       // if just a plus, or if just a dial code
       if (!numeric || this.selectedCountryData.dialCode === numeric) {
         this.setState({
-          value: '',
+          value: ''
         });
       }
     }
@@ -610,7 +601,7 @@ class IntlTelInput extends Component {
 
       this.setState({
         showDropdown: true,
-        highlightedCountry: selectedIndex,
+        highlightedCountry: selectedIndex
       });
     }
   };
@@ -627,7 +618,7 @@ class IntlTelInput extends Component {
         {
           showDropdown: false,
           highlightedCountry: selectedIndex,
-          countryCode,
+          countryCode
         },
         () => {
           this.setFlag(this.state.countryCode);
@@ -652,7 +643,7 @@ class IntlTelInput extends Component {
         // update highlighting and scroll
         this.setState({
           showDropdown: true,
-          highlightedCountry: selectedIndex,
+          highlightedCountry: selectedIndex
         });
         this.scrollTo(listItem, true);
         break;
@@ -683,12 +674,12 @@ class IntlTelInput extends Component {
     return number;
   };
 
-  updateCursorPosition = cursorPosition => {		
-    this.setState({		
-      cursorPosition		
-    });		
+  updateCursorPosition = cursorPosition => {
+    this.setState({
+      cursorPosition
+    });
   };
-  
+
   // update the input's value to the given val (format first if possible)
   // if doNotify is true, calls notifyPhoneNumberChange with the formatted value
   // NOTE: this is called from _setInitialState, handleUtils and setNumber
@@ -712,7 +703,7 @@ class IntlTelInput extends Component {
     this.setState(
       {
         showDropdown: false,
-        value: number,
+        value: number
       },
       () => {
         if (doNotify) {
@@ -858,7 +849,7 @@ class IntlTelInput extends Component {
         {
           showDropdown: true,
           offsetTop: utils.offset(this.tel).top,
-          outerHeight: utils.getOuterHeight(this.tel),
+          outerHeight: utils.getOuterHeight(this.tel)
         },
         () => {
           const highlightItem = this.flagDropDown.querySelector('.highlight');
@@ -889,10 +880,10 @@ class IntlTelInput extends Component {
       const numberType = window.intlTelInputUtils.numberType[props.numberType];
       let placeholder = this.selectedCountryData.iso2
         ? window.intlTelInputUtils.getExampleNumber(
-          this.selectedCountryData.iso2,
-          this.nationalMode,
-          numberType
-        )
+            this.selectedCountryData.iso2,
+            this.nationalMode,
+            numberType
+          )
         : '';
 
       placeholder = this.beforeSetNumber(placeholder, props);
@@ -905,7 +896,7 @@ class IntlTelInput extends Component {
       }
 
       this.setState({
-        placeholder,
+        placeholder
       });
     }
   };
@@ -913,7 +904,7 @@ class IntlTelInput extends Component {
   toggleDropdown = status => {
     this.setState(
       {
-        showDropdown: !!status,
+        showDropdown: !!status
       },
       () => {
         if (!this.state.showDropdown) {
@@ -1004,7 +995,7 @@ class IntlTelInput extends Component {
   };
 
   generateMarkup = () => {
-	this.wrapperClass['allow-dropdown'] = this.allowDropdown;
+    this.wrapperClass['allow-dropdown'] = this.allowDropdown;
     this.wrapperClass['separate-dial-code'] = this.props.separateDialCode;
 
     if (this.isMobile && this.props.useMobileFullscreenDropdown) {
@@ -1056,9 +1047,9 @@ class IntlTelInput extends Component {
   formatFullNumber = number => {
     return window.intlTelInputUtils
       ? this.getNumber(
-        number,
-        window.intlTelInputUtils.numberFormat.INTERNATIONAL
-      )
+          number,
+          window.intlTelInputUtils.numberFormat.INTERNATIONAL
+        )
       : number;
   };
 
@@ -1111,7 +1102,7 @@ class IntlTelInput extends Component {
   handleWindowScroll = () => {
     this.setState(
       {
-        showDropdown: false,
+        showDropdown: false
       },
       () => {
         window.removeEventListener('scroll', this.handleWindowScroll);
@@ -1135,7 +1126,7 @@ class IntlTelInput extends Component {
     } else if (e.which === this.keys.ESC) {
       // esc to close
       this.setState({
-        showDropdown: false,
+        showDropdown: false
       });
     } else if (
       (e.which >= this.keys.A && e.which <= this.keys.Z) ||
@@ -1203,7 +1194,7 @@ class IntlTelInput extends Component {
     if (this.props.value !== undefined) {
       this.setState(
         {
-          cursorPosition,
+          cursorPosition
         },
         () => {
           this.updateFlagFromNumber(value);
@@ -1214,7 +1205,7 @@ class IntlTelInput extends Component {
       this.setState(
         {
           value,
-          cursorPosition,
+          cursorPosition
         },
         () => {
           this.updateFlagFromNumber(value);
@@ -1233,7 +1224,7 @@ class IntlTelInput extends Component {
   changeHighlightCountry = (showDropdown, selectedIndex) => {
     this.setState({
       showDropdown,
-      highlightedCountry: selectedIndex,
+      highlightedCountry: selectedIndex
     });
   };
 
@@ -1263,8 +1254,8 @@ class IntlTelInput extends Component {
 
     const titleTip = this.selectedCountryData
       ? `${this.selectedCountryData.name}: +${
-        this.selectedCountryData.dialCode
-      }`
+          this.selectedCountryData.dialCode
+        }`
       : 'Unknown';
 
     const value =
@@ -1392,7 +1383,7 @@ IntlTelInput.propTypes = {
   /** Format the number. */
   format: PropTypes.bool,
   /** Allow main app to do things when flag icon is clicked. */
-  onFlagClick: PropTypes.func,
+  onFlagClick: PropTypes.func
 };
 
 IntlTelInput.defaultProps = {
@@ -1444,7 +1435,7 @@ IntlTelInput.defaultProps = {
   telInputProps: {},
   // always format the number
   format: false,
-  onFlagClick: null,
+  onFlagClick: null
 };
 
 export default IntlTelInput;

From d7c6c3739060758fe8a5295519fa6a5e55bd2989 Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 12:40:21 +0700
Subject: [PATCH 4/6] Fix "The Travis CI build failed"

---
 src/components/IntlTelInput.js | 81 ++++++++++++++++------------------
 src/components/RootModal.js    | 24 +++++-----
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/src/components/IntlTelInput.js b/src/components/IntlTelInput.js
index 0cbbe1103..e87ae6f89 100644
--- a/src/components/IntlTelInput.js
+++ b/src/components/IntlTelInput.js
@@ -20,13 +20,13 @@ class IntlTelInput extends Component {
       prevState.value !== nextProps.value
     ) {
       newState = {
-        value: nextProps.value
+        value: nextProps.value,
       };
     }
 
     if (nextProps.disabled && prevState.disabled !== nextProps.disabled) {
       newState = {
-        disabled: nextProps.disabled
+        disabled: nextProps.disabled,
       };
     }
 
@@ -65,7 +65,7 @@ class IntlTelInput extends Component {
       A: 65,
       Z: 90,
       SPACE: 32,
-      TAB: 9
+      TAB: 9,
     };
 
     this.query = '';
@@ -82,7 +82,7 @@ class IntlTelInput extends Component {
       placeholder: '',
       countryCode: 'us',
       dialCode: '',
-      cursorPosition: (props.value || props.defaultValue).length
+      cursorPosition: (props.value || props.defaultValue).length,
     };
   }
 
@@ -219,12 +219,12 @@ class IntlTelInput extends Component {
     // do this first as it will throw an error and stop if countryCode is invalid
     this.selectedCountryData = countryCode
       ? utils.getCountryData(
-          this.countries,
-          countryCode,
-          false,
-          false,
-          this.props.noCountryDataHandler
-        )
+        this.countries,
+        countryCode,
+        false,
+        false,
+        this.props.noCountryDataHandler
+      )
       : {};
 
     // update the defaultCountry - we only need the iso2 from now on, so just store that
@@ -281,7 +281,7 @@ class IntlTelInput extends Component {
         showDropdown: false,
         highlightedCountry: selectedIndex,
         countryCode,
-        dialCode
+        dialCode,
       },
       () => {
         // and the input's placeholder
@@ -488,7 +488,7 @@ class IntlTelInput extends Component {
         !this.props.separateDialCode
       ) {
         this.setState({
-          value: `+${this.selectedCountryData.dialCode}`
+          value: `+${this.selectedCountryData.dialCode}`,
         });
       }
     }
@@ -573,7 +573,7 @@ class IntlTelInput extends Component {
       // if just a plus, or if just a dial code
       if (!numeric || this.selectedCountryData.dialCode === numeric) {
         this.setState({
-          value: ''
+          value: '',
         });
       }
     }
@@ -601,7 +601,7 @@ class IntlTelInput extends Component {
 
       this.setState({
         showDropdown: true,
-        highlightedCountry: selectedIndex
+        highlightedCountry: selectedIndex,
       });
     }
   };
@@ -618,7 +618,7 @@ class IntlTelInput extends Component {
         {
           showDropdown: false,
           highlightedCountry: selectedIndex,
-          countryCode
+          countryCode,
         },
         () => {
           this.setFlag(this.state.countryCode);
@@ -633,9 +633,7 @@ class IntlTelInput extends Component {
     for (let i = 0, max = this.countries.length; i < max; i++) {
       if (utils.startsWith(this.countries[i].name, query)) {
         const listItem = this.flagDropDown.querySelector(
-          `.country-list [data-country-code="${
-            this.countries[i].iso2
-          }"]:not(.preferred)`
+          `.country-list [data-country-code="${this.countries[i].iso2}"]:not(.preferred)`
         );
 
         const selectedIndex = utils.retrieveLiIndex(listItem);
@@ -643,7 +641,7 @@ class IntlTelInput extends Component {
         // update highlighting and scroll
         this.setState({
           showDropdown: true,
-          highlightedCountry: selectedIndex
+          highlightedCountry: selectedIndex,
         });
         this.scrollTo(listItem, true);
         break;
@@ -676,7 +674,7 @@ class IntlTelInput extends Component {
 
   updateCursorPosition = cursorPosition => {
     this.setState({
-      cursorPosition
+      cursorPosition,
     });
   };
 
@@ -687,7 +685,7 @@ class IntlTelInput extends Component {
     if (doFormat && window.intlTelInputUtils && this.selectedCountryData) {
       const format =
         !this.props.separateDialCode &&
-        (this.nationalMode || number.charAt(0) !== '+')
+          (this.nationalMode || number.charAt(0) !== '+')
           ? window.intlTelInputUtils.numberFormat.NATIONAL
           : window.intlTelInputUtils.numberFormat.INTERNATIONAL;
 
@@ -703,7 +701,7 @@ class IntlTelInput extends Component {
     this.setState(
       {
         showDropdown: false,
-        value: number
+        value: number,
       },
       () => {
         if (doNotify) {
@@ -849,7 +847,7 @@ class IntlTelInput extends Component {
         {
           showDropdown: true,
           offsetTop: utils.offset(this.tel).top,
-          outerHeight: utils.getOuterHeight(this.tel)
+          outerHeight: utils.getOuterHeight(this.tel),
         },
         () => {
           const highlightItem = this.flagDropDown.querySelector('.highlight');
@@ -880,10 +878,10 @@ class IntlTelInput extends Component {
       const numberType = window.intlTelInputUtils.numberType[props.numberType];
       let placeholder = this.selectedCountryData.iso2
         ? window.intlTelInputUtils.getExampleNumber(
-            this.selectedCountryData.iso2,
-            this.nationalMode,
-            numberType
-          )
+          this.selectedCountryData.iso2,
+          this.nationalMode,
+          numberType
+        )
         : '';
 
       placeholder = this.beforeSetNumber(placeholder, props);
@@ -896,7 +894,7 @@ class IntlTelInput extends Component {
       }
 
       this.setState({
-        placeholder
+        placeholder,
       });
     }
   };
@@ -904,7 +902,7 @@ class IntlTelInput extends Component {
   toggleDropdown = status => {
     this.setState(
       {
-        showDropdown: !!status
+        showDropdown: !!status,
       },
       () => {
         if (!this.state.showDropdown) {
@@ -1047,9 +1045,9 @@ class IntlTelInput extends Component {
   formatFullNumber = number => {
     return window.intlTelInputUtils
       ? this.getNumber(
-          number,
-          window.intlTelInputUtils.numberFormat.INTERNATIONAL
-        )
+        number,
+        window.intlTelInputUtils.numberFormat.INTERNATIONAL
+      )
       : number;
   };
 
@@ -1102,7 +1100,7 @@ class IntlTelInput extends Component {
   handleWindowScroll = () => {
     this.setState(
       {
-        showDropdown: false
+        showDropdown: false,
       },
       () => {
         window.removeEventListener('scroll', this.handleWindowScroll);
@@ -1126,7 +1124,7 @@ class IntlTelInput extends Component {
     } else if (e.which === this.keys.ESC) {
       // esc to close
       this.setState({
-        showDropdown: false
+        showDropdown: false,
       });
     } else if (
       (e.which >= this.keys.A && e.which <= this.keys.Z) ||
@@ -1194,7 +1192,7 @@ class IntlTelInput extends Component {
     if (this.props.value !== undefined) {
       this.setState(
         {
-          cursorPosition
+          cursorPosition,
         },
         () => {
           this.updateFlagFromNumber(value);
@@ -1205,7 +1203,7 @@ class IntlTelInput extends Component {
       this.setState(
         {
           value,
-          cursorPosition
+          cursorPosition,
         },
         () => {
           this.updateFlagFromNumber(value);
@@ -1224,7 +1222,7 @@ class IntlTelInput extends Component {
   changeHighlightCountry = (showDropdown, selectedIndex) => {
     this.setState({
       showDropdown,
-      highlightedCountry: selectedIndex
+      highlightedCountry: selectedIndex,
     });
   };
 
@@ -1253,9 +1251,8 @@ class IntlTelInput extends Component {
     const wrapperClass = classNames(this.wrapperClass);
 
     const titleTip = this.selectedCountryData
-      ? `${this.selectedCountryData.name}: +${
-          this.selectedCountryData.dialCode
-        }`
+      ? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode
+      }`
       : 'Unknown';
 
     const value =
@@ -1383,7 +1380,7 @@ IntlTelInput.propTypes = {
   /** Format the number. */
   format: PropTypes.bool,
   /** Allow main app to do things when flag icon is clicked. */
-  onFlagClick: PropTypes.func
+  onFlagClick: PropTypes.func,
 };
 
 IntlTelInput.defaultProps = {
@@ -1435,7 +1432,7 @@ IntlTelInput.defaultProps = {
   telInputProps: {},
   // always format the number
   format: false,
-  onFlagClick: null
+  onFlagClick: null,
 };
 
 export default IntlTelInput;
diff --git a/src/components/RootModal.js b/src/components/RootModal.js
index 11fc227e2..58aa98be4 100644
--- a/src/components/RootModal.js
+++ b/src/components/RootModal.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
@@ -7,29 +7,25 @@ export default class RootModal extends Component {
     children: PropTypes.node,
   };
 
-  componentDidMount() {
+  constructor(props) {
+    super(props);
+
     this.modalTarget = document.createElement('div');
     this.modalTarget.className = 'intl-tel-input iti-container';
-    document.body.appendChild(this.modalTarget);
-    this._render();
   }
 
-  shouldComponentUpdate() {
-    this._render();
-
-    return false;
+  componentDidMount() {
+    document.body.appendChild(this.modalTarget);
   }
 
   componentWillUnmount() {
-    ReactDOM.unmountComponentAtNode(this.modalTarget);
     document.body.removeChild(this.modalTarget);
   }
 
-  _render() {
-    ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
-  }
-
   render() {
-    return <noscript />;
+    return ReactDOM.createPortal(
+      <Fragment>{this.props.children}</Fragment>,
+      this.modalTarget
+    );
   }
 }

From f91d7f076ad6e1bbe9932a2ee4b231a8d6348915 Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 12:58:52 +0700
Subject: [PATCH 5/6] Fix "The Travis CI build failed"

---
 TelInput.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 TelInput.js

diff --git a/TelInput.js b/TelInput.js
new file mode 100644
index 000000000..cf2b468d8
--- /dev/null
+++ b/TelInput.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class TelInput extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    readonly: PropTypes.bool,
+    fieldName: PropTypes.string,
+    fieldId: PropTypes.string,
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    handleInputChange: PropTypes.func,
+    handlePaste: PropTypes.func,
+    handleOnBlur: PropTypes.func,
+    autoFocus: PropTypes.bool,
+    autoComplete: PropTypes.string,
+    inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    refCallback: PropTypes.func.isRequired,
+    cursorPosition: PropTypes.number,
+  };
+
+  componentDidUpdate() {
+    this.tel.setSelectionRange(
+      this.props.cursorPosition,
+      this.props.cursorPosition
+    );
+  }
+
+  refHandler = element => {
+    this.tel = element;
+    this.props.refCallback(element);
+  };
+
+  handleBlur = e => {
+    if (typeof this.props.handleOnBlur === 'function') {
+      this.props.handleOnBlur(e);
+    }
+  };
+
+  handleFocus = () => { };
+
+  handlePaste = e => {
+    if (typeof this.props.handlePaste === 'function') {
+      this.props.handlePaste(e);
+    }
+  };
+
+  render() {
+    return (
+      <input
+        {...this.props.inputProps}
+        ref={this.refHandler}
+        type="tel"
+        autoComplete={this.props.autoComplete}
+        className={this.props.className}
+        disabled={this.props.disabled ? 'disabled' : false}
+        readOnly={this.props.readonly ? 'readonly' : false}
+        name={this.props.fieldName}
+        id={this.props.fieldId}
+        value={this.props.value}
+        placeholder={this.props.placeholder}
+        onChange={this.props.handleInputChange}
+        onPaste={this.handlePaste}
+        onBlur={this.handleBlur}
+        onFocus={this.handleFocus}
+        autoFocus={this.props.autoFocus}
+      />
+    );
+  }
+}

From 53923c20d7007aeb8bbdf0196d6fafa8042aa1cd Mon Sep 17 00:00:00 2001
From: Hailuabk <sieuquaytihonbk90@gmail.com>
Date: Mon, 20 May 2019 14:33:17 +0700
Subject: [PATCH 6/6] Fix Missing trailing comma  comma-dangle

---
 src/components/TelInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TelInput.js b/src/components/TelInput.js
index b9baba655..8132992a2 100644
--- a/src/components/TelInput.js
+++ b/src/components/TelInput.js
@@ -17,7 +17,7 @@ export default class TelInput extends Component {
     autoComplete: PropTypes.string,
     inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     refCallback: PropTypes.func.isRequired,
-    cursorPosition: PropTypes.number
+    cursorPosition: PropTypes.number,
   };
 
   componentDidUpdate() {