diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js index 36fbcf35..bcfba047 100644 --- a/browser/main/HomePage/ArticleTopBar.js +++ b/browser/main/HomePage/ArticleTopBar.js @@ -42,12 +42,26 @@ export default class ArticleTopBar extends React.Component { componentDidMount () { this.searchInput = ReactDOM.findDOMNode(this.refs.searchInput) + this.linksButton = ReactDOM.findDOMNode(this.refs.links) + this.showLinksDropdown = e => { + e.preventDefault() + e.stopPropagation() + if (!this.state.isLinksDropdownOpen) { + this.setState({isLinksDropdownOpen: true}) + } + } + this.linksButton.addEventListener('click', this.showLinksDropdown) + this.hideLinksDropdown = e => { + if (this.state.isLinksDropdownOpen) { + this.setState({isLinksDropdownOpen: false}) + } + } + document.addEventListener('click', this.hideLinksDropdown) } componentWillUnmount () { - this.searchInput.removeEventListener('keydown', this.showTooltip) - this.searchInput.removeEventListener('focus', this.showTooltip) - this.searchInput.removeEventListener('blur', this.showTooltip) + document.removeEventListener('click', this.hideLinksDropdown) + this.linksButton.removeEventListener('click', this.showLinksDropdown()) } handleTooltipRequest (e) { @@ -97,28 +111,6 @@ export default class ArticleTopBar extends React.Component { dispatch(toggleTutorial()) } - handleLinksDropdownClick (e) { - e.preventDefault() - let linksButton = document.activeElement - this.handleLinksDropdownClickHandler = e => { - if (linksButton !== document.activeElement) { - console.log('hide dropdown') - document.removeEventListener('click', this.handleLinksDropdownClickHandler) - this.setState({ - isLinksDropdownOpen: false - }) - } - } - - if (!this.state.isLinksDropdownOpen) { - document.removeEventListener('click', this.handleLinksDropdownClickHandler) - document.addEventListener('click', this.handleLinksDropdownClickHandler) - this.setState({ - isLinksDropdownOpen: true - }) - } - } - render () { let { status } = this.props return ( @@ -155,7 +147,7 @@ export default class ArticleTopBar extends React.Component {
- this.handleLinksDropdownClick(e)} href> + {