diff options
| -rw-r--r-- | ui/app/app.js | 18 | ||||
| -rw-r--r-- | ui/app/components/account-dropdowns.js | 18 |
2 files changed, 32 insertions, 4 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index b251baefd..8fad0f7d6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -198,7 +198,17 @@ App.prototype.renderNetworkDropdown = function () { return h(Dropdown, { isOpen, onClickOutside: (event) => { - this.setState({ isNetworkMenuOpen: !isOpen }) + const { classList } = event.target + const isNotToggleElement = [ + classList.contains('menu-icon'), + classList.contains('network-name'), + classList.contains('network-indicator'), + ].filter(bool => bool).length === 0; + // classes from three constituent nodes of the toggle element + + if (isNotToggleElement) { + this.setState({ isNetworkMenuOpen: false }) + } }, zIndex: 11, style: { @@ -308,7 +318,11 @@ App.prototype.renderDropdown = function () { isOpen: isOpen, zIndex: 11, onClickOutside: (event) => { - this.setState({ isMainMenuOpen: !isOpen }) + const { classList } = event.target + const isNotToggleElement = !classList.contains('sandwich-expando') + if (isNotToggleElement) { + this.setState({ isMainMenuOpen: false }) + } }, style: { position: 'absolute', diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 61f32f713..2813f4752 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -17,6 +17,8 @@ class AccountDropdowns extends Component { accountSelectorActive: false, optionsMenuActive: false, } + this.accountSelectorToggleClassName = 'fa-angle-down'; + this.optionsMenuToggleClassName = 'fa-ellipsis-h'; } renderAccounts () { @@ -63,7 +65,13 @@ class AccountDropdowns extends Component { maxHeight: '300px', }, isOpen: accountSelectorActive, - onClickOutside: () => { this.setState({ accountSelectorActive: false }) }, + onClickOutside: (event) => { + const { classList } = event.target + const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName) + if (accountSelectorActive && isNotToggleElement) { + this.setState({ accountSelectorActive: false }) + } + }, }, [ ...this.renderAccounts(), @@ -115,7 +123,13 @@ class AccountDropdowns extends Component { minWidth: '180px', }, isOpen: optionsMenuActive, - onClickOutside: () => { this.setState({ optionsMenuActive: false }) }, + onClickOutside: () => { + const { classList } = event.target + const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) + if (optionsMenuActive && isNotToggleElement) { + this.setState({ optionsMenuActive: false }) + } + }, }, [ h( |