From bfe0323bd7bf3bd3a4145dfab87ec4891f4e75d6 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 26 Jul 2023 14:38:19 -0500 Subject: [PATCH] UX: Ensure currently selected account displays when Account Menu opens (#20166) * UX: Ensure currently selected account displays when Account Menu opens * Jest tests --- .../account-list-item/account-list-item.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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 a481f321a..10e8d463f 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, useContext } from 'react'; +import React, { useState, useContext, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; @@ -88,6 +88,15 @@ export const AccountListItem = ({ 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) => findKeyringForAddress(state, identity.address), ); @@ -104,6 +113,7 @@ export const AccountListItem = ({ 'multichain-account-list-item--selected': selected, 'multichain-account-list-item--connected': Boolean(connectedAvatar), })} + ref={itemRef} onClick={() => { // Without this check, the account will be selected after // the account options menu closes