diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ae32ae9e6507..2d897e55c1a1 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2532,9 +2532,6 @@ "noAccountsFound": { "message": "No accounts found for the given search query" }, - "noNetworksFound": { - "message": "No networks found for the given search query" - }, "noAddressForName": { "message": "No address has been set for this name." }, @@ -2547,6 +2544,9 @@ "noNFTs": { "message": "No NFTs yet" }, + "noNetworksFound": { + "message": "No networks found for the given search query" + }, "noReport": { "message": "No Report" }, diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js index f478f21e61fd..2031196dbc38 100644 --- 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 ( { 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')} <> - {nonTestNetworks.length > 4 ? ( + {nonTestNetworks.length > 3 ? ( { ) : null} - {searchResults.length === 0 && searchQuery !== '' ? ( + {searchResults.length === 0 && isSearching ? ( { 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(); + }); });