`;
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js
index afbad052c..4871b4c28 100644
--- a/ui/components/multichain/account-list-item/account-list-item.js
+++ b/ui/components/multichain/account-list-item/account-list-item.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useContext } from 'react';
+import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
@@ -8,9 +8,9 @@ import { getRpcPrefsForCurrentProvider } from '../../../selectors';
import { getURLHostName, shortenAddress } from '../../../helpers/utils/util';
import { AccountListItemMenu } from '..';
-import Box from '../../ui/box/box';
import {
AvatarAccount,
+ Box,
Text,
AvatarFavicon,
Tag,
@@ -24,13 +24,13 @@ import {
Color,
TextAlign,
AlignItems,
- DISPLAY,
TextVariant,
- FLEX_DIRECTION,
+ FlexDirection,
BorderRadius,
JustifyContent,
Size,
BorderColor,
+ Display,
} from '../../../helpers/constants/design-system';
import { HardwareKeyringNames } from '../../../../shared/constants/hardware-wallets';
import { KeyringType } from '../../../../shared/constants/keyring';
@@ -75,9 +75,14 @@ export const AccountListItem = ({
}) => {
const t = useI18nContext();
const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
- const ref = useRef(false);
+ const [accountListItemMenuElement, setAccountListItemMenuElement] =
+ useState();
const useBlockie = useSelector((state) => state.metamask.useBlockie);
+ const setAccountListItemMenuRef = (ref) => {
+ setAccountListItemMenuElement(ref);
+ };
+
const keyring = useSelector((state) =>
findKeyringForAddress(state, identity.address),
);
@@ -91,7 +96,7 @@ export const AccountListItem = ({
return (
-
+
-
+
{connectedAvatar ? (
) : null}
-
-
{
- e.stopPropagation();
+ {
+ e.stopPropagation();
+ if (!accountOptionsMenuOpen) {
trackEvent({
event: MetaMetricsEventName.AccountDetailMenuOpened,
category: MetaMetricsEventCategory.Navigation,
@@ -233,21 +239,20 @@ export const AccountListItem = ({
location: 'Account Options',
},
});
- setAccountOptionsMenuOpen(true);
- }}
- data-testid="account-list-item-menu-button"
- />
- {accountOptionsMenuOpen ? (
- setAccountOptionsMenuOpen(false)}
- isRemovable={keyring?.type !== KeyringType.hdKeyTree}
- closeMenu={closeMenu}
- />
- ) : null}
-
+ }
+ setAccountOptionsMenuOpen(!accountOptionsMenuOpen);
+ }}
+ data-testid="account-list-item-menu-button"
+ />
+ setAccountOptionsMenuOpen(false)}
+ isOpen={accountOptionsMenuOpen}
+ isRemovable={keyring?.type !== KeyringType.hdKeyTree}
+ closeMenu={closeMenu}
+ />
);
};
diff --git a/ui/components/multichain/account-list-item/account-list-item.test.js b/ui/components/multichain/account-list-item/account-list-item.test.js
index b8e3e292e..6b4a60e6a 100644
--- a/ui/components/multichain/account-list-item/account-list-item.test.js
+++ b/ui/components/multichain/account-list-item/account-list-item.test.js
@@ -68,7 +68,9 @@ describe('AccountListItem', () => {
);
expect(optionsButton).toBeInTheDocument();
fireEvent.click(optionsButton);
- expect(document.querySelector('.menu__background')).toBeInTheDocument();
+ expect(
+ document.querySelector('.multichain-account-list-item-menu__popover'),
+ ).toBeInTheDocument();
});
it('executes the action when the item is clicked', () => {
diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss
index 324d79ee8..a93926b22 100644
--- a/ui/components/multichain/multichain-components.scss
+++ b/ui/components/multichain/multichain-components.scss
@@ -6,6 +6,7 @@
**/
@import 'address-copy-button/index';
@import 'account-list-item/index';
+@import 'account-list-item-menu/index';
@import 'account-list-menu/index';
@import 'account-picker/index';
@import 'app-header/app-header';
diff --git a/ui/components/ui/menu/menu-item.js b/ui/components/ui/menu/menu-item.js
index 9e2913d12..10fcce629 100644
--- a/ui/components/ui/menu/menu-item.js
+++ b/ui/components/ui/menu/menu-item.js
@@ -5,29 +5,35 @@ import classnames from 'classnames';
import { Text, Icon, IconSize } from '../../component-library';
import { TextVariant } from '../../../helpers/constants/design-system';
-const MenuItem = ({
- children,
- className,
- 'data-testid': dataTestId,
- iconName,
- onClick,
- subtitle,
- disabled = false,
-}) => (
-
+const MenuItem = React.forwardRef(
+ (
+ {
+ children,
+ className,
+ 'data-testid': dataTestId,
+ iconName,
+ onClick,
+ subtitle,
+ disabled = false,
+ },
+ ref,
+ ) => (
+
+ ),
);
MenuItem.propTypes = {
@@ -40,4 +46,6 @@ MenuItem.propTypes = {
disabled: PropTypes.bool,
};
+MenuItem.displayName = 'MenuItem';
+
export default MenuItem;
diff --git a/ui/css/design-system/z-index.scss b/ui/css/design-system/z-index.scss
index 0fd57acc1..ef4c9686f 100644
--- a/ui/css/design-system/z-index.scss
+++ b/ui/css/design-system/z-index.scss
@@ -11,3 +11,4 @@ $send-card-z-index: 20;
$sidebar-z-index: 26;
$sidebar-overlay-z-index: 25;
$modal-z-index: 1050;
+$popover-in-modal-z-index: 1051;