From fb07d8457e0cb58e2fdabacf45bf34c32010b98e Mon Sep 17 00:00:00 2001
From: Igor Voronin <Voron.exe@gmail.com>
Date: Thu, 13 Jan 2022 15:38:43 +0200
Subject: [PATCH] Remove z-index from selected flag

---
 src/components/IntlTelInput.js | 40 +++++++++++++++++-----------------
 src/intlTelInput.scss          | 11 +++-------
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/components/IntlTelInput.js b/src/components/IntlTelInput.js
index cd0f2d73d..8914d130b 100644
--- a/src/components/IntlTelInput.js
+++ b/src/components/IntlTelInput.js
@@ -1283,26 +1283,6 @@ class IntlTelInput extends Component {
 
     return (
       <div className={wrapperClass} style={wrapperStyle}>
-        <FlagDropDown
-          refCallback={this.setFlagDropdownRef}
-          allowDropdown={this.allowDropdown}
-          dropdownContainer={this.dropdownContainer}
-          separateDialCode={this.props.separateDialCode}
-          dialCode={this.state.dialCode}
-          clickSelectedFlag={this.clickSelectedFlag}
-          setFlag={this.setFlag}
-          countryCode={this.state.countryCode}
-          isMobile={this.isMobile}
-          handleSelectedFlagKeydown={this.handleSelectedFlagKeydown}
-          changeHighlightCountry={this.changeHighlightCountry}
-          countries={this.countries}
-          showDropdown={this.state.showDropdown}
-          inputTop={this.state.offsetTop}
-          inputOuterHeight={this.state.outerHeight}
-          preferredCountries={this.preferredCountries}
-          highlightedCountry={this.state.highlightedCountry}
-          titleTip={titleTip}
-        />
         <TelInput
           refCallback={this.setTelRef}
           handleInputChange={this.handleInputChange}
@@ -1324,6 +1304,26 @@ class IntlTelInput extends Component {
           inputProps={this.props.telInputProps}
           cursorPosition={this.state.cursorPosition}
         />
+        <FlagDropDown
+          refCallback={this.setFlagDropdownRef}
+          allowDropdown={this.allowDropdown}
+          dropdownContainer={this.dropdownContainer}
+          separateDialCode={this.props.separateDialCode}
+          dialCode={this.state.dialCode}
+          clickSelectedFlag={this.clickSelectedFlag}
+          setFlag={this.setFlag}
+          countryCode={this.state.countryCode}
+          isMobile={this.isMobile}
+          handleSelectedFlagKeydown={this.handleSelectedFlagKeydown}
+          changeHighlightCountry={this.changeHighlightCountry}
+          countries={this.countries}
+          showDropdown={this.state.showDropdown}
+          inputTop={this.state.offsetTop}
+          inputOuterHeight={this.state.outerHeight}
+          preferredCountries={this.preferredCountries}
+          highlightedCountry={this.state.highlightedCountry}
+          titleTip={titleTip}
+        />
       </div>
     )
   }
diff --git a/src/intlTelInput.scss b/src/intlTelInput.scss
index 2e043e19e..3f83dba77 100644
--- a/src/intlTelInput.scss
+++ b/src/intlTelInput.scss
@@ -46,8 +46,6 @@ $mobilePopupMargin: 30px;
   // specify types to increase specificity e.g. to override bootstrap v2.3
   input, input[type=text], input[type=tel] {
     position: relative;
-    // input is bottom level, below selected flag and dropdown
-    z-index: 0;
 
     // any vertical margin the user has on their inputs would no longer work as expected
     // because we wrap everything in a container div. i justify the use of !important
@@ -75,11 +73,11 @@ $mobilePopupMargin: 30px;
     right: 0;
     // prevent the highlighted child from overlapping the input border
     padding: $borderWidth;
-  
+
     .arrow {
         font-size: 6px;
         margin-left: 5px;
-        
+
         &.up:after {
             content: '▲';
         }
@@ -92,8 +90,6 @@ $mobilePopupMargin: 30px;
   }
 
   .selected-flag {
-    // render above the input
-    z-index: 1;
     position: relative;
     width: $selectedFlagWidth;
     // this must be full-height both for the hover highlight, and to push down the
@@ -115,7 +111,7 @@ $mobilePopupMargin: 30px;
     list-style: none;
     // in case any container has text-align:center
     text-align: left;
-    
+
     .divider {
         padding-bottom: 5px;
         margin-bottom: 5px;
@@ -184,7 +180,6 @@ $mobilePopupMargin: 30px;
     .flag-container {
       right: auto;
       left: 0;
-      width: 100%;
     }
     .selected-flag {
       width: $selectedFlagArrowWidth;