diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx index 864c4848fd774a32c9bd712fb2d0883d185b47aa..2175db56429d8aa1e214a2d1bd01ae0dcfc54429 100644 --- a/src/components/language-selector/language-selector.jsx +++ b/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 diff --git a/src/containers/language-selector.jsx b/src/containers/language-selector.jsx index 1672949a3716ea11b88a71b5e53dbf389886af24..fe24812bd82892621673308f866ee9b6486686a7 100644 --- a/src/containers/language-selector.jsx +++ b/src/containers/language-selector.jsx @@ -11,10 +11,31 @@ class LanguageSelector extends React.Component { constructor (props) { super(props); bindAll(this, [ - 'handleChange' + 'handleChange', + 'handleMouseOut', + 'ref' ]); document.documentElement.lang = props.currentLocale; } + componentDidMount () { + this.addListeners(); + } + + componentWillUnmount () { + this.removeListeners(); + } + addListeners () { + this.select.addEventListener('mouseout', this.handleMouseOut); + } + removeListeners () { + this.select.removeEventListener('mouseout', this.handleMouseOut); + } + handleMouseOut () { + this.select.blur(); + } + ref (c) { + this.select = c; + } handleChange (e) { const newLocale = e.target.value; if (this.props.messagesByLocale[newLocale]) { @@ -31,6 +52,7 @@ class LanguageSelector extends React.Component { } = this.props; return ( <LanguageSelectorComponent + componentRef={this.ref} onChange={this.handleChange} {...props} >