mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
UX: Ensure currently selected account displays when Account Menu opens (#20166)
* UX: Ensure currently selected account displays when Account Menu opens * Jest tests
This commit is contained in:
parent
c1a7f46e8f
commit
bfe0323bd7
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useContext } from 'react';
|
import React, { useState, useContext, useEffect, useRef } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
@ -88,6 +88,15 @@ export const AccountListItem = ({
|
|||||||
setAccountListItemMenuElement(ref);
|
setAccountListItemMenuElement(ref);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// If this is the selected item in the Account menu,
|
||||||
|
// scroll the item into view
|
||||||
|
const itemRef = useRef(null);
|
||||||
|
useEffect(() => {
|
||||||
|
if (selected) {
|
||||||
|
itemRef.current?.scrollIntoView?.();
|
||||||
|
}
|
||||||
|
}, [itemRef, selected]);
|
||||||
|
|
||||||
const keyring = useSelector((state) =>
|
const keyring = useSelector((state) =>
|
||||||
findKeyringForAddress(state, identity.address),
|
findKeyringForAddress(state, identity.address),
|
||||||
);
|
);
|
||||||
@ -104,6 +113,7 @@ export const AccountListItem = ({
|
|||||||
'multichain-account-list-item--selected': selected,
|
'multichain-account-list-item--selected': selected,
|
||||||
'multichain-account-list-item--connected': Boolean(connectedAvatar),
|
'multichain-account-list-item--connected': Boolean(connectedAvatar),
|
||||||
})}
|
})}
|
||||||
|
ref={itemRef}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// Without this check, the account will be selected after
|
// Without this check, the account will be selected after
|
||||||
// the account options menu closes
|
// the account options menu closes
|
||||||
|
Loading…
Reference in New Issue
Block a user