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={{