Blur language select focus when mouse leaves

Blur the language select when the user clicks outside the select so that arrow keys go to the stage instead of the select.

src/components/language-selector/language-selector.jsx

@@ -7,10 +7,11 @@ import styles from './language-selector.css';
 // supported languages to exclude from the menu, but allow as a URL option
 const ignore = [];
 
-const LanguageSelector = ({currentLocale, label, onChange}) => (
+const LanguageSelector = ({componentRef, currentLocale, label, onChange}) => (
     <select
         aria-label={label}
         className={styles.languageSelect}
+        ref={componentRef}
         value={currentLocale}
         onChange={onChange}
     >
@@ -30,6 +31,7 @@ const LanguageSelector = ({currentLocale, label, onChange}) => (
 );
 
 LanguageSelector.propTypes = {
+    componentRef: PropTypes.func,
     currentLocale: PropTypes.string,
     label: PropTypes.string,
     onChange: PropTypes.func

src/containers/language-selector.jsx

@@ -11,10 +11,31 @@ class LanguageSelector extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleChange'
+            'handleChange',
+            'handleMouseLeave',
+            'ref'
         ]);
         document.documentElement.lang = props.currentLocale;
     }
+    componentDidMount () {
+        this.addListeners();
+    }
+
+    componentWillUnmount () {
+        this.removeListeners();
+    }
+    addListeners () {
+        this.select.addEventListener('mouseleave', this.handleMouseLeave);
+    }
+    removeListeners () {
+        this.select.removeEventListener('mouseleave', this.handleMouseLeave);
+    }
+    handleMouseLeave () {
+        this.select.blur();
+    }
+    ref (c) {
+        this.select = c;
+    }
     handleChange (e) {
         const newLocale = e.target.value;
         if (this.props.supportedLocales.includes(newLocale)) {
@@ -31,6 +52,7 @@ class LanguageSelector extends React.Component {
         } = this.props;
         return (
             <LanguageSelectorComponent
+                componentRef={this.ref}
                 onChange={this.handleChange}
                 {...props}
             >