fix: correct tab order for country code dropdown (#708).

src/index.js

@@ -958,30 +958,6 @@ class PhoneInput extends React.Component {
         onKeyDown={this.handleKeydown}>
         {specialLabel && <div className='special-label'>{specialLabel}</div>}
         {errorMessage && <div className='invalid-number-message'>{errorMessage}</div>}
-        <input
-          className={inputClasses}
-          style={this.props.inputStyle}
-          onChange={this.handleInput}
-          onClick={this.handleInputClick}
-          onDoubleClick={this.handleDoubleClick}
-          onFocus={this.handleInputFocus}
-          onBlur={this.handleInputBlur}
-          onCopy={this.handleInputCopy}
-          value={formattedNumber}
-          onKeyDown={this.handleInputKeyDown}
-          placeholder={this.props.placeholder}
-          disabled={this.props.disabled}
-          type='tel'
-          {...this.props.inputProps}
-          ref={el => {
-            this.numberInputRef = el;
-            if (typeof this.props.inputProps.ref === 'function') {
-              this.props.inputProps.ref(el);
-            } else if (typeof this.props.inputProps.ref === 'object') {
-              this.props.inputProps.ref.current = el;
-            }
-          }}
-        />
 
         <div
           className={flagViewClasses}
@@ -1007,6 +983,30 @@ class PhoneInput extends React.Component {
 
           {showDropdown && this.getCountryDropdownList()}
         </div>
+        <input
+          className={inputClasses}
+          style={this.props.inputStyle}
+          onChange={this.handleInput}
+          onClick={this.handleInputClick}
+          onDoubleClick={this.handleDoubleClick}
+          onFocus={this.handleInputFocus}
+          onBlur={this.handleInputBlur}
+          onCopy={this.handleInputCopy}
+          value={formattedNumber}
+          onKeyDown={this.handleInputKeyDown}
+          placeholder={this.props.placeholder}
+          disabled={this.props.disabled}
+          type='tel'
+          {...this.props.inputProps}
+          ref={el => {
+            this.numberInputRef = el;
+            if (typeof this.props.inputProps.ref === 'function') {
+              this.props.inputProps.ref(el);
+            } else if (typeof this.props.inputProps.ref === 'object') {
+              this.props.inputProps.ref.current = el;
+            }
+          }}
+        />
       </div>
     );
   }

src/style/high-res.less

@@ -39,6 +39,7 @@
     background-color: #f5f5f5;
     border: 1px solid #cacaca;
     border-radius: 3px 0 0 3px;
+    z-index: 1;
     &:hover, &:focus {
       cursor: pointer;
     }

src/style/material.less

@@ -40,6 +40,7 @@
     bottom: 0;
     padding: 0;
     border-radius: 3px 0 0 3px;
+    z-index: 1;
     &:hover, &:focus {
       cursor: pointer;
     }

src/style/semantic-ui.less

@@ -45,6 +45,7 @@
     background-color: #f5f5f5;
     border: 1px solid #cacaca;
     border-radius: 3px 0 0 3px;
+    z-index: 1;
     &:hover, &:focus {
       cursor: pointer;
     }

src/style/style.less

@@ -35,6 +35,7 @@
     background-color: #f5f5f5;
     border: 1px solid #cacaca;
     border-radius: 3px 0 0 3px;
+    z-index: 1;
     &:hover, &:focus {
       cursor: pointer;
     }