1
0
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:
David Walsh 2023-07-26 14:38:19 -05:00 committed by GitHub
parent c1a7f46e8f
commit bfe0323bd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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