m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 20:02:58 +01:00
Code

UX: Multichain: Network Menu: Set Focus on Selected Network (#18706)

Browse Source
This commit is contained in:
David Walsh 2023-04-21 08:37:51 -05:00 committed by GitHub
parent 9ade5d0eb1
commit 4e3c08aba4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/components/multichain/network-list-item/network-list-item.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
@ -31,6 +31,14 @@ export const NetworkListItem = ({
onDeleteClick,
}) => {
const t = useI18nContext();
const networkRef = useRef();
useEffect(() => {
if (networkRef.current && selected) {
networkRef.current.querySelector('.mm-button-link').focus();
}
}, [networkRef, selected]);
return (
<Box
onClick={onClick}
@ -43,6 +51,7 @@ export const NetworkListItem = ({
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
width={BLOCK_SIZES.FULL}
ref={networkRef}
>
{selected && (
<Box
@ -53,7 +62,14 @@ export const NetworkListItem = ({
)}
<AvatarNetwork name={name} src={iconSrc} />
<Box className="multichain-network-list-item__network-name">
<ButtonLink onClick={onClick} color={TextColor.textDefault} ellipsis>
<ButtonLink
onClick={(e) => {
e.stopPropagation();
onClick();
}}
color={TextColor.textDefault}
ellipsis
>
{name.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
<Tooltip
title={name}