diff --git a/ui/components/multichain/network-list-item-menu/network-list-item-menu.js b/ui/components/multichain/network-list-item-menu/network-list-item-menu.js
index 52a579513ffa..a1a0f9ad6632 100644
--- a/ui/components/multichain/network-list-item-menu/network-list-item-menu.js
+++ b/ui/components/multichain/network-list-item-menu/network-list-item-menu.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 5b3f2dadbc9f..2df12ec8605d 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -157,6 +157,7 @@ export const NetworkListMenu = ({ onClose }) => {
}, [dispatch, currentlyOnTestNetwork]);
const [searchQuery, setSearchQuery] = useState('');
+ const [focusSearch, setFocusSearch] = useState(false);
const onboardedInThisUISession = useSelector(getOnboardedInThisUISession);
const showNetworkBanner = useSelector(getShowNetworkBanner);
const showBanner =
@@ -190,9 +191,9 @@ export const NetworkListMenu = ({ onClose }) => {
? items
: [...notExistingNetworkConfigurations];
- const isSearching = searchQuery !== '';
+ let searchTestNetworkResults = [...testNetworks];
- if (isSearching) {
+ if (focusSearch && searchQuery !== '') {
const fuse = new Fuse(searchResults, {
threshold: 0.2,
location: 0,
@@ -212,11 +213,25 @@ export const NetworkListMenu = ({ onClose }) => {
keys: ['nickname', 'chainId', 'ticker'],
});
+ const fuseForTestsNetworks = new Fuse(searchTestNetworkResults, {
+ threshold: 0.2,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 32,
+ minMatchCharLength: 1,
+ shouldSort: true,
+ keys: ['nickname', 'chainId', 'ticker'],
+ });
+
fuse.setCollection(searchResults);
fuseForPopularNetworks.setCollection(searchAddNetworkResults);
+ fuseForTestsNetworks.setCollection(searchTestNetworkResults);
+
const fuseResults = fuse.search(searchQuery);
const fuseForPopularNetworksResults =
fuseForPopularNetworks.search(searchQuery);
+ const fuseForTestsNetworksResults =
+ fuseForTestsNetworks.search(searchQuery);
searchResults = searchResults.filter((network) =>
fuseResults.includes(network),
@@ -224,6 +239,9 @@ export const NetworkListMenu = ({ onClose }) => {
searchAddNetworkResults = searchAddNetworkResults.filter((network) =>
fuseForPopularNetworksResults.includes(network),
);
+ searchTestNetworkResults = searchTestNetworkResults.filter((network) =>
+ fuseForTestsNetworksResults.includes(network),
+ );
}
const getOnDeleteCallback = (networkId) => {
@@ -265,8 +283,8 @@ export const NetworkListMenu = ({ onClose }) => {
name={network.nickname}
iconSrc={network?.rpcPrefs?.imageUrl}
key={network.id}
- selected={isCurrentNetwork}
- focus={isCurrentNetwork && !isSearching}
+ selected={isCurrentNetwork && !focusSearch}
+ focus={isCurrentNetwork && !focusSearch}
onClick={() => {
dispatch(toggleNetworkMenu());
if (network.providerType) {
@@ -312,6 +330,7 @@ export const NetworkListMenu = ({ onClose }) => {
@@ -339,7 +358,7 @@ export const NetworkListMenu = ({ onClose }) => {
/>
) : null}
- {searchResults.length === 0 && isSearching ? (
+ {searchResults.length === 0 && focusSearch ? (
{
name={network.nickname}
iconSrc={network?.rpcPrefs?.imageUrl}
key={network.id}
- selected={isCurrentNetwork}
- focus={isCurrentNetwork && !isSearching}
+ selected={isCurrentNetwork && !focusSearch}
+ focus={isCurrentNetwork && !focusSearch}
onClick={() => {
dispatch(toggleNetworkMenu());
if (network.providerType) {
@@ -458,7 +477,7 @@ export const NetworkListMenu = ({ onClose }) => {
{showTestNetworks || currentlyOnTestNetwork ? (
- {generateMenuItems(testNetworks)}
+ {generateMenuItems(searchTestNetworkResults)}
) : null}