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

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

ui/components/multichain/account-list-menu/account-list-menu.js

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