Country selection dropdown should not have horizontal scroll

Country selection dropdown should not have horizontal scroll

Author: suppermancool

components/Dropdown/Dropdown.jsx

@@ -123,7 +123,7 @@ class Dropdown  extends React.Component {
     )
     return (
       <div className={ddClasses} onClick={noAutoclose ? () => { } : handleClick}>
-        {handleKeyboardNavigation && (<a onKeyDown={onKeydown} className="handle-keyboard" href="javascript:;"></a>)}
+        {handleKeyboardNavigation && (<a tabIndex="0" onKeyDown={onKeydown} className="handle-keyboard" href="javascript:;"></a>)}
         {
           childrenWithProps.map((child, index) => {
             if (child.props.className.indexOf('dropdown-menu-header') > -1)

components/Dropdown/Dropdown.scss

@@ -37,6 +37,8 @@
         font-size: 12px;
         display: block;
         line-height: 26px;
+        overflow: hidden;
+        white-space: pre-line;
       }
     }
   }
@@ -86,6 +88,10 @@
       top: 0;
       left: 0;
       height: 100%;
+
+      &:focus {
+        outline: 5px auto -webkit-focus-ring-color;
+      }
     }
   }
 

components/Formsy/PhoneInput.jsx

@@ -105,7 +105,7 @@ class PhoneInput extends Component {
                 {
                   this.props.listCountry.map((country, i) => {
                     /* eslint-disable react/jsx-no-bind */
-                    return <li className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
+                    return <li tabIndex="-1" className={(this.state.currentCountry.code === country.code) ? 'selected' : ''} onClick={() => this.choseCountry(country)} key={i}><a href="javascript:;">{country.name}</a></li>
                   })
                 }
               </ul>