diff --git a/frontend/src/components/context-menu/context-menu.js b/frontend/src/components/context-menu/context-menu.js index 956343979c..6f2be29d51 100644 --- a/frontend/src/components/context-menu/context-menu.js +++ b/frontend/src/components/context-menu/context-menu.js @@ -189,7 +189,7 @@ class ContextMenu extends React.Component { }; onDropDownMouseMove = (e) => { - if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') { + if (this.state.isSubMenuShown) { this.setState({ isSubMenuShown: false }); @@ -256,6 +256,7 @@ class ContextMenu extends React.Component { data-operation={menuItem.key} onClick={this.onMenuItemClick} onContextMenu={this.onContextMenu} + onMouseMove={this.onDropDownMouseMove} > {menuItem.value} diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js index a0b4ea4251..24d219cacf 100644 --- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js +++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import listener from '../context-menu/globalEventListener'; +import classnames from 'classnames'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'; +import listener from '../context-menu/globalEventListener'; import { gettext } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import ModalPortal from '../modal-portal'; @@ -114,8 +115,8 @@ class ItemDropdownMenu extends React.Component { this.props.onMenuItemClick(operation, event, item); }; - onDropDownMouseMove = (e) => { - if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') { + onDropDownMouseMove = () => { + if (this.state.isSubMenuShown) { this.setState({ isSubMenuShown: false }); @@ -191,7 +192,6 @@ class ItemDropdownMenu extends React.Component { {menuList.map((menuItem, index) => { if (menuItem === 'Divider') { @@ -208,7 +208,7 @@ class ItemDropdownMenu extends React.Component { > {menuItem.value} @@ -229,15 +229,21 @@ class ItemDropdownMenu extends React.Component { ); } else { return ( - -
- - {menuItem.key === 'Display files' && this.props.isDisplayFiles && ( - - )} - - {menuItem.value} -
+ + {menuItem.key === 'Display files' && this.props.isDisplayFiles && ( + + )} + {menuItem.value} ); } diff --git a/frontend/src/css/item-dropdown-menu.css b/frontend/src/css/item-dropdown-menu.css index 8edcf2ec6b..3c4509cb3b 100644 --- a/frontend/src/css/item-dropdown-menu.css +++ b/frontend/src/css/item-dropdown-menu.css @@ -1,13 +1,4 @@ -.dropdown-item-wrapper { - height: 100%; - display: flex; - align-items: center; - position: relative; - padding-left: 1.5rem; - padding-right: 1rem; -} - -.dropdown-item-wrapper .dropdown-item-tick { +.dropdown-item .dropdown-item-tick { width: 1.5rem; height: 100%; display: flex;