m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX: Multichain: Focus on account search when menu appears (#18705)

Browse Source 
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
David Walsh 2023-04-26 08:18:48 -05:00 committed by GitHub
parent bc3baaed31
commit 15d64b6467
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/components/multichain/account-list-menu/account-list-menu.js
View File

@ -1,4 +1,4 @@
import React, { useState, useContext } from 'react';
import React, { useState, useContext, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import Fuse from 'fuse.js';
@ -45,6 +45,7 @@ export const AccountListMenu = ({ onClose }) => {
const currentTabOrigin = useSelector(getOriginOfCurrentTab);
const history = useHistory();
const dispatch = useDispatch();
const inputRef = useRef();
const [searchQuery, setSearchQuery] = useState('');
@ -62,8 +63,20 @@ export const AccountListMenu = ({ onClose }) => {
searchResults = fuse.search(searchQuery);
}
// Focus on the search box when the popover is opened
useEffect(() => {
if (inputRef.current) {
inputRef.current.rootNode.querySelector('input[type=search]').focus();
}
}, [inputRef]);
return (
<Popover title={t('selectAnAccount')} centerTitle onClose={onClose}>
<Popover
title={t('selectAnAccount')}
ref={inputRef}
centerTitle
onClose={onClose}
>
<Box className="multichain-account-menu">
{/* Search box */}
<Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>