Maintain order, add tests

MetaMask · Jul 18, 2023 · 866203e · 866203e
1 parent 16462c5
commit 866203e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
@@ -47,19 +47,18 @@ export const NetworkListItem = ({
   name,
   iconSrc,
   selected = false,
+  focus = true,
   onClick,
   onDeleteClick,
 }) => {
   const t = useI18nContext();
   const networkRef = useRef();
 
-  /*
   useEffect(() => {
-    if (networkRef.current && selected) {
+    if (networkRef.current && focus) {
       networkRef.current.querySelector('.mm-button-link').focus();
     }
-  }, [networkRef, selected]);
-  */
+  }, [networkRef, focus]);
 
   return (
     <Box
@@ -148,4 +147,8 @@ NetworkListItem.propTypes = {
    * Executes when the delete icon is clicked
    */
   onDeleteClick: PropTypes.func,
+  /**
+   * Represents if the network item should be keyboard selected
+   */
+  focus: PropTypes.bool,
 };
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -37,6 +37,7 @@ import {
   Box,
   Text,
   TextFieldSearch,
+  Text,
 } from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@@ -86,8 +87,9 @@ export const NetworkListMenu = ({ onClose }) => {
   const [searchQuery, setSearchQuery] = useState('');
 
   let searchResults = [...nonTestNetworks];
+  const isSearching = searchQuery !== '';
 
-  if (searchQuery) {
+  if (isSearching) {
     const fuse = new Fuse(searchResults, {
       threshold: 0.2,
       location: 0,
@@ -98,7 +100,11 @@ export const NetworkListMenu = ({ onClose }) => {
       keys: ['nickname', 'chainId', 'ticker'],
     });
     fuse.setCollection(searchResults);
-    searchResults = fuse.search(searchQuery);
+    const fuseResults = fuse.search(searchQuery);
+    // Ensure order integrity with original list
+    searchResults = searchResults.filter((network) =>
+      fuseResults.includes(network),
+    );
   }
 
   const generateMenuItems = (desiredNetworks) => {
@@ -117,6 +123,7 @@ export const NetworkListMenu = ({ onClose }) => {
           iconSrc={network?.rpcPrefs?.imageUrl}
           key={`${network.id || network.chainId}-${index}`}
           selected={isCurrentNetwork}
+          focus={isCurrentNetwork && !isSearching}
           onClick={() => {
             dispatch(toggleNetworkMenu());
             if (network.providerType) {
@@ -181,7 +188,7 @@ export const NetworkListMenu = ({ onClose }) => {
           {t('networkMenuHeading')}
         </ModalHeader>
         <>
-          {nonTestNetworks.length > 4 ? (
+          {nonTestNetworks.length > 3 ? (
             <Box
               paddingLeft={4}
               paddingRight={4}
@@ -203,7 +210,7 @@ export const NetworkListMenu = ({ onClose }) => {
             </Box>
           ) : null}
           <Box className="multichain-network-list-menu">
-            {searchResults.length === 0 && searchQuery !== '' ? (
+            {searchResults.length === 0 && isSearching ? (
               <Text
                 paddingLeft={4}
                 paddingRight={4}

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -37,10 +37,11 @@ const render = (showTestNetworks = false, currentChainId = '0x1') => {
 
 describe('NetworkListMenu', () => {
   it('displays important controls', () => {
-    const { getByText } = render();
+    const { getByText, getByPlaceholderText } = render();
 
     expect(getByText('Add network')).toBeInTheDocument();
     expect(getByText('Show test networks')).toBeInTheDocument();
+    expect(getByPlaceholderText('Search')).toBeInTheDocument();
   });
 
   it('renders mainnet item', () => {
@@ -71,4 +72,15 @@ describe('NetworkListMenu', () => {
     expect(mockToggleNetworkMenu).toHaveBeenCalled();
     expect(mockSetProviderType).toHaveBeenCalled();
   });
+
+  it('narrows down search results', () => {
+    const { queryByText, getByPlaceholderText } = render();
+
+    expect(queryByText('Chain 5')).toBeInTheDocument();
+
+    const searchBox = getByPlaceholderText('Search');
+    fireEvent.change(searchBox, { target: { value: 'Main' } });
+
+    expect(queryByText('Chain 5')).not.toBeInTheDocument();
+  });
 });