From 33d2ae5fc415b119a2305468b733fd3b6fb55a58 Mon Sep 17 00:00:00 2001
From: Taras Semenyuk <taras.semenyuk@machiq.com>
Date: Fri, 10 Sep 2021 15:53:53 +0200
Subject: [PATCH 1/2] i18n fix for title

---
 src/index.js        | 30 +++++++++++++++---------------
 test/dev_js/demo.js | 15 +++++++++++++++
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/index.js b/src/index.js
index 6ebfc56a..14bea517 100644
--- a/src/index.js
+++ b/src/index.js
@@ -964,21 +964,21 @@ class PhoneInput extends React.Component {
           ref={el => this.dropdownContainerRef = el}
         >
           {renderStringAsFlag ?
-          <div className={selectedFlagClasses}>{renderStringAsFlag}</div>
-          :
-          <div
-            onClick={disableDropdown ? undefined : this.handleFlagDropdownClick}
-            className={selectedFlagClasses}
-            title={selectedCountry ? `${selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
-            tabIndex={disableDropdown ? '-1' : '0'}
-            role='button'
-            aria-haspopup="listbox"
-            aria-expanded={showDropdown ? true : undefined}
-          >
-            <div className={inputFlagClasses}>
-              {!disableDropdown && <div className={arrowClasses}></div>}
-            </div>
-          </div>}
+            <div className={selectedFlagClasses}>{renderStringAsFlag}</div>
+            :
+            <div
+              onClick={disableDropdown ? undefined : this.handleFlagDropdownClick}
+              className={selectedFlagClasses}
+              title={selectedCountry ? `${selectedCountry.localName || selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
+              tabIndex={disableDropdown ? '-1' : '0'}
+              role='button'
+              aria-haspopup="listbox"
+              aria-expanded={showDropdown ? true : undefined}
+            >
+              <div className={inputFlagClasses}>
+                {!disableDropdown && <div className={arrowClasses}></div>}
+              </div>
+            </div>}
 
           {showDropdown && this.getCountryDropdownList()}
         </div>
diff --git a/test/dev_js/demo.js b/test/dev_js/demo.js
index 30e975ba..e9cc690e 100644
--- a/test/dev_js/demo.js
+++ b/test/dev_js/demo.js
@@ -221,6 +221,21 @@ class Demo extends React.Component {
 
           <PhoneInput key={this.playgroundKey} {...this.state.playgroundProps}/>
         </div>
+
+        <div>
+          <br/><br/>
+          <p>Example for <a target={"_blank"} href={'https://github.com/bl00mber/react-phone-input-2/issues/456'}>https://github.com/bl00mber/react-phone-input-2/issues/456</a></p>
+          <p>i18n list of countries, first 3 are in German and the rest is in English</p>
+          <p>title has local name of the country, or if it's not exist - default one:</p>
+          <PhoneInput
+            countries={[{"value":"EG","label":"Ägypten"},{"value":"GQ","label":"Äquatorialguinea"},{"value":"ET","label":"Äthiopien"}]}
+            enableSearch
+            localization={{"eg":"Ägypten","gq":"Äquatorialguinea","et":"Äthiopien"}}
+            onlyCountries={["eg","gq","et","af","ax","al"]}
+            placeholder={`Select country`}
+            preserveOrder={['onlyCountries']}
+          />
+        </div>
       </div>
     )
   }

From 41a2fd6cb256ba54b818154d112663656476413f Mon Sep 17 00:00:00 2001
From: Taras Semenyuk <taras.semenyuk@machiq.com>
Date: Fri, 10 Sep 2021 16:04:54 +0200
Subject: [PATCH 2/2] space removed

---
 src/index.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/index.js b/src/index.js
index 14bea517..2ca5d657 100644
--- a/src/index.js
+++ b/src/index.js
@@ -964,21 +964,21 @@ class PhoneInput extends React.Component {
           ref={el => this.dropdownContainerRef = el}
         >
           {renderStringAsFlag ?
-            <div className={selectedFlagClasses}>{renderStringAsFlag}</div>
-            :
-            <div
-              onClick={disableDropdown ? undefined : this.handleFlagDropdownClick}
-              className={selectedFlagClasses}
-              title={selectedCountry ? `${selectedCountry.localName || selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
-              tabIndex={disableDropdown ? '-1' : '0'}
-              role='button'
-              aria-haspopup="listbox"
-              aria-expanded={showDropdown ? true : undefined}
-            >
-              <div className={inputFlagClasses}>
-                {!disableDropdown && <div className={arrowClasses}></div>}
-              </div>
-            </div>}
+          <div className={selectedFlagClasses}>{renderStringAsFlag}</div>
+          :
+          <div
+            onClick={disableDropdown ? undefined : this.handleFlagDropdownClick}
+            className={selectedFlagClasses}
+            title={selectedCountry ? `${selectedCountry.localName || selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
+            tabIndex={disableDropdown ? '-1' : '0'}
+            role='button'
+            aria-haspopup="listbox"
+            aria-expanded={showDropdown ? true : undefined}
+          >
+            <div className={inputFlagClasses}>
+              {!disableDropdown && <div className={arrowClasses}></div>}
+            </div>
+          </div>}
 
           {showDropdown && this.getCountryDropdownList()}
         </div>