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