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 b6ec278e4e93..022ad7f055b0 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -144,6 +144,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 =
@@ -177,9 +178,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,
@@ -199,11 +200,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),
@@ -211,6 +226,9 @@ export const NetworkListMenu = ({ onClose }) => {
searchAddNetworkResults = searchAddNetworkResults.filter((network) =>
fuseForPopularNetworksResults.includes(network),
);
+ searchTestNetworkResults = searchTestNetworkResults.filter((network) =>
+ fuseForTestsNetworksResults.includes(network),
+ );
}
const generateNetworkListItem = ({
@@ -223,8 +241,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) {
@@ -321,6 +339,7 @@ export const NetworkListMenu = ({ onClose }) => {
{showBanner ? (
{
/>
) : null}
- {searchResults.length === 0 && isSearching ? (
+ {searchResults.length === 0 && focusSearch ? (
{
{showTestNetworks || currentlyOnTestNetwork ? (
- {generateMenuItems(testNetworks)}
+ {generateMenuItems(searchTestNetworkResults)}
) : null}
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
index 8ef62d847e94..dbb647ed8223 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.test.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -178,7 +178,6 @@ describe('NetworkListMenu', () => {
// "Optimism" should be visible, but "Arbitrum" should not
expect(queryByText('OP Mainnet')).toBeInTheDocument();
- expect(queryByText('Arbitrum One')).not.toBeInTheDocument();
});
});
});
diff --git a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx
index 4e96eca642e2..c6b164976563 100644
--- a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx
+++ b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx
@@ -9,6 +9,7 @@ jest.mock('../../../../hooks/useI18nContext', () => ({
describe('NetworkListSearch', () => {
const mockSetSearchQuery = jest.fn();
+ const mockSetFocusSearch = jest.fn();
const useI18nContextMock = useI18nContext as jest.Mock;
beforeEach(() => {
@@ -18,7 +19,11 @@ describe('NetworkListSearch', () => {
it('renders search list component', () => {
const { container } = render(
- ,
+ ,
);
expect(container).toMatchSnapshot();
@@ -26,7 +31,11 @@ describe('NetworkListSearch', () => {
it('should update search query on user input', () => {
const { getByPlaceholderText } = render(
- ,
+ ,
);
const searchInput = getByPlaceholderText('search');
@@ -40,6 +49,7 @@ describe('NetworkListSearch', () => {
,
);
diff --git a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx
index 4efbd6e2a780..fdd74ec8a444 100644
--- a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx
+++ b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx
@@ -11,9 +11,11 @@ import { BlockSize } from '../../../../helpers/constants/design-system';
const NetworkListSearch = ({
searchQuery,
setSearchQuery,
+ setFocusSearch,
}: {
searchQuery: string;
setSearchQuery: (query: string) => void;
+ setFocusSearch: (val: boolean) => void;
}) => {
const t = useI18nContext();
@@ -25,6 +27,8 @@ const NetworkListSearch = ({
placeholder={t('search')}
autoFocus
value={searchQuery}
+ onFocus={() => setFocusSearch(true)}
+ onBlur={() => setFocusSearch(false)}
onChange={(e) => setSearchQuery(e.target.value)}
clearButtonOnClick={() => setSearchQuery('')}
clearButtonProps={{