[FIX #12760] Highlighting on search (#13730)

ui/helpers/utils/settings-search.js

@@ -10,9 +10,6 @@ import {
   EXPERIMENTAL_ROUTE,
 } from '../constants/routes';
 
-const MENU_TAB = 'menu-tab';
-const MENU_SECTION = 'menu-section';
-
 function showHideSettings(t, settings) {
   if (!process.env.COLLECTIBLES_V1) {
     return settings.filter(
@@ -32,6 +29,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${GENERAL_ROUTE}#currency-conversion`,
       image: 'general-icon.svg',
+      id: 1,
     },
     {
       tab: t('general'),
@@ -39,6 +37,7 @@ export function getSettingsRoutes(t) {
       description: t('primaryCurrencySettingDescription'),
       route: `${GENERAL_ROUTE}#primary-currency`,
       image: 'general-icon.svg',
+      id: 2,
     },
     {
       tab: t('general'),
@@ -46,6 +45,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${GENERAL_ROUTE}#current-language`,
       image: 'general-icon.svg',
+      id: 3,
     },
     {
       tab: t('general'),
@@ -53,6 +53,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${GENERAL_ROUTE}#account-identicon`,
       image: 'general-icon.svg',
+      id: 4,
     },
     {
       tab: t('general'),
@@ -60,6 +61,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${GENERAL_ROUTE}#zero-balancetokens`,
       image: 'general-icon.svg',
+      id: 5,
     },
     {
       tab: t('advanced'),
@@ -67,6 +69,7 @@ export function getSettingsRoutes(t) {
       description: t('stateLogsDescription'),
       route: `${ADVANCED_ROUTE}#state-logs`,
       image: 'advanced-icon.svg',
+      id: 6,
     },
     {
       tab: t('advanced'),
@@ -74,6 +77,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${ADVANCED_ROUTE}#sync-withmobile`,
       image: 'advanced-icon.svg',
+      id: 7,
     },
     {
       tab: t('advanced'),
@@ -81,6 +85,7 @@ export function getSettingsRoutes(t) {
       description: t('resetAccountDescription'),
       route: `${ADVANCED_ROUTE}#reset-account`,
       image: 'advanced-icon.svg',
+      id: 8,
     },
     {
       tab: t('advanced'),
@@ -88,6 +93,7 @@ export function getSettingsRoutes(t) {
       description: t('showAdvancedGasInlineDescription'),
       route: `${ADVANCED_ROUTE}#advanced-gascontrols`,
       image: 'advanced-icon.svg',
+      id: 9,
     },
     {
       tab: t('advanced'),
@@ -95,6 +101,7 @@ export function getSettingsRoutes(t) {
       description: t('showHexDataDescription'),
       route: `${ADVANCED_ROUTE}#show-hexdata`,
       image: 'advanced-icon.svg',
+      id: 10,
     },
     {
       tab: t('advanced'),
@@ -102,6 +109,7 @@ export function getSettingsRoutes(t) {
       description: t('showFiatConversionInTestnetsDescription'),
       route: `${ADVANCED_ROUTE}#conversion-testnetworks`,
       image: 'advanced-icon.svg',
+      id: 11,
     },
     {
       tab: t('advanced'),
@@ -109,6 +117,7 @@ export function getSettingsRoutes(t) {
       description: t('showTestnetNetworksDescription'),
       route: `${ADVANCED_ROUTE}#show-testnets`,
       image: 'advanced-icon.svg',
+      id: 12,
     },
     {
       tab: t('advanced'),
@@ -116,6 +125,7 @@ export function getSettingsRoutes(t) {
       description: t('nonceFieldDescription'),
       route: `${ADVANCED_ROUTE}#customize-nonce`,
       image: 'advanced-icon.svg',
+      id: 13,
     },
     {
       tab: t('advanced'),
@@ -123,6 +133,7 @@ export function getSettingsRoutes(t) {
       description: t('autoLockTimeLimitDescription'),
       route: `${ADVANCED_ROUTE}#autolock-timer`,
       image: 'advanced-icon.svg',
+      id: 14,
     },
     {
       tab: t('advanced'),
@@ -130,6 +141,7 @@ export function getSettingsRoutes(t) {
       description: t('syncWithThreeBoxDescription'),
       route: `${ADVANCED_ROUTE}#sync-with3box`,
       image: 'advanced-icon.svg',
+      id: 15,
     },
     {
       tab: t('advanced'),
@@ -137,6 +149,7 @@ export function getSettingsRoutes(t) {
       description: t('ipfsGatewayDescription'),
       route: `${ADVANCED_ROUTE}#ipfs-gateway`,
       image: 'advanced-icon.svg',
+      id: 16,
     },
     {
       tab: t('advanced'),
@@ -144,6 +157,7 @@ export function getSettingsRoutes(t) {
       description: t('preferredLedgerConnectionType'),
       route: `${ADVANCED_ROUTE}#ledger-connection`,
       image: 'advanced-icon.svg',
+      id: 17,
     },
     {
       tab: t('advanced'),
@@ -151,6 +165,7 @@ export function getSettingsRoutes(t) {
       description: t('dismissReminderDescriptionField'),
       route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`,
       image: 'advanced-icon.svg',
+      id: 18,
     },
     {
       tab: t('contacts'),
@@ -158,6 +173,7 @@ export function getSettingsRoutes(t) {
       description: t('contacts'),
       route: CONTACT_LIST_ROUTE,
       image: 'contacts-icon.svg',
+      id: 19,
     },
     {
       tab: t('securityAndPrivacy'),
@@ -165,6 +181,7 @@ export function getSettingsRoutes(t) {
       description: t('revealSeedWords'),
       route: `${SECURITY_ROUTE}#reveal-secretrecovery`,
       image: 'security-icon.svg',
+      id: 20,
     },
     {
       tab: t('securityAndPrivacy'),
@@ -172,6 +189,7 @@ export function getSettingsRoutes(t) {
       description: t('showIncomingTransactionsDescription'),
       route: `${SECURITY_ROUTE}#incoming-transaction`,
       image: 'security-icon.svg',
+      id: 21,
     },
     {
       tab: t('securityAndPrivacy'),
@@ -179,6 +197,7 @@ export function getSettingsRoutes(t) {
       description: t('usePhishingDetectionDescription'),
       route: `${SECURITY_ROUTE}#phishing-detection`,
       image: 'security-icon.svg',
+      id: 22,
     },
     {
       tab: t('securityAndPrivacy'),
@@ -186,6 +205,7 @@ export function getSettingsRoutes(t) {
       description: t('participateInMetaMetricsDescription'),
       route: `${SECURITY_ROUTE}#metrametrics`,
       image: 'security-icon.svg',
+      id: 23,
     },
     {
       tab: t('alerts'),
@@ -193,6 +213,7 @@ export function getSettingsRoutes(t) {
       description: t('alertSettingsUnconnectedAccount'),
       route: `${ALERTS_ROUTE}#unconnected-account`,
       image: 'alerts-icon.svg',
+      id: 24,
     },
     {
       tab: t('alerts'),
@@ -200,6 +221,7 @@ export function getSettingsRoutes(t) {
       description: t('alertSettingsWeb3ShimUsage'),
       route: `${ALERTS_ROUTE}#web3-shimusage`,
       image: 'alerts-icon.svg',
+      id: 25,
     },
     {
       tab: t('networks'),
@@ -207,6 +229,7 @@ export function getSettingsRoutes(t) {
       description: t('mainnet'),
       route: `${NETWORKS_ROUTE}#networks-mainnet`,
       image: 'network-icon.svg',
+      id: 26,
     },
     {
       tab: t('networks'),
@@ -214,6 +237,7 @@ export function getSettingsRoutes(t) {
       description: t('ropsten'),
       route: `${NETWORKS_ROUTE}#networks-ropsten`,
       image: 'network-icon.svg',
+      id: 27,
     },
     {
       tab: t('networks'),
@@ -221,6 +245,7 @@ export function getSettingsRoutes(t) {
       description: t('rinkeby'),
       route: `${NETWORKS_ROUTE}#networks-rinkeby`,
       image: 'network-icon.svg',
+      id: 28,
     },
     {
       tab: t('networks'),
@@ -228,6 +253,7 @@ export function getSettingsRoutes(t) {
       description: t('goerli'),
       route: `${NETWORKS_ROUTE}#networks-goerli`,
       image: 'network-icon.svg',
+      id: 29,
     },
     {
       tab: t('networks'),
@@ -235,6 +261,7 @@ export function getSettingsRoutes(t) {
       description: t('kovan'),
       route: `${NETWORKS_ROUTE}#networtks-kovan`,
       image: 'network-icon.svg',
+      id: 30,
     },
     {
       tab: t('networks'),
@@ -242,6 +269,7 @@ export function getSettingsRoutes(t) {
       description: t('localhost'),
       route: `${NETWORKS_ROUTE}#network-localhost`,
       image: 'network-icon.svg',
+      id: 31,
     },
     {
       tab: t('experimental'),
@@ -249,6 +277,7 @@ export function getSettingsRoutes(t) {
       description: t('useTokenDetectionDescription'),
       route: `${EXPERIMENTAL_ROUTE}#token-description`,
       image: 'experimental-icon.svg',
+      id: 32,
     },
     {
       tab: t('experimental'),
@@ -256,6 +285,7 @@ export function getSettingsRoutes(t) {
       description: t('enableOpenSeaAPIDescription'),
       route: `${EXPERIMENTAL_ROUTE}#opensea-api`,
       image: 'experimental-icon.svg',
+      id: 33,
     },
     {
       tab: t('experimental'),
@@ -263,6 +293,7 @@ export function getSettingsRoutes(t) {
       description: t('useCollectibleDetectionDescription'),
       route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`,
       image: 'experimental-icon.svg',
+      id: 34,
     },
 
     {
@@ -271,6 +302,7 @@ export function getSettingsRoutes(t) {
       description: t('builtAroundTheWorld'),
       route: `${ABOUT_US_ROUTE}#version`,
       image: 'info-icon.svg',
+      id: 35,
     },
     {
       tab: t('about'),
@@ -278,6 +310,7 @@ export function getSettingsRoutes(t) {
       description: '',
       route: `${ABOUT_US_ROUTE}#links`,
       image: 'info-icon.svg',
+      id: 36,
     },
     {
       tab: t('about'),
@@ -285,6 +318,7 @@ export function getSettingsRoutes(t) {
       description: t('privacyMsg'),
       route: `${ABOUT_US_ROUTE}#privacy-policy`,
       image: 'info-icon.svg',
+      id: 37,
     },
     {
       tab: t('about'),
@@ -292,6 +326,7 @@ export function getSettingsRoutes(t) {
       description: t('terms'),
       route: `${ABOUT_US_ROUTE}#terms`,
       image: 'info-icon.svg',
+      id: 38,
     },
 
     {
@@ -300,6 +335,7 @@ export function getSettingsRoutes(t) {
       description: t('attributions'),
       route: `${ABOUT_US_ROUTE}#attributions`,
       image: 'info-icon.svg',
+      id: 39,
     },
 
     {
@@ -308,6 +344,7 @@ export function getSettingsRoutes(t) {
       description: t('supportCenter'),
       route: `${ABOUT_US_ROUTE}#supportcenter`,
       image: 'info-icon.svg',
+      id: 40,
     },
 
     {
@@ -316,6 +353,7 @@ export function getSettingsRoutes(t) {
       description: t('visitWebSite'),
       route: `${ABOUT_US_ROUTE}#visitwebsite`,
       image: 'info-icon.svg',
+      id: 41,
     },
 
     {
@@ -324,6 +362,7 @@ export function getSettingsRoutes(t) {
       description: t('contactUs'),
       route: `${ABOUT_US_ROUTE}#contactus`,
       image: 'info-icon.svg',
+      id: 42,
     },
   ];
 
@@ -392,16 +431,21 @@ function colorText(menuElement, regex) {
     );
   }
 }
-export function highlightSearchedText(menuIndex) {
+export function highlightSearchedText() {
-  const menuTabElement = document.getElementById(`${MENU_TAB}_${menuIndex}`);
+  const searchElem = document.getElementById('search-settings');
-  const menuSectionElement = document.getElementById(
+  const searchRegex = new RegExp(searchElem.value, 'gi');
-    `${MENU_SECTION}_${menuIndex}`,
+  const results = document.querySelectorAll(
+    '.settings-page__header__search__list__item',
+  );
+
+  [...results].forEach((element) => {
+    const menuTabElement = element.querySelector(
+      '.settings-page__header__search__list__item__tab',
+    );
+    const menuSectionElement = element.querySelector(
+      '.settings-page__header__search__list__item__section',
     );
 
-  const searchElem = document.getElementById('search-settings');
-  searchElem.addEventListener('input', (event) => {
-    const searchQuery = event.target.value;
-    const searchRegex = new RegExp(searchQuery, 'gi');
     colorText(menuTabElement, searchRegex);
     colorText(menuSectionElement, searchRegex);
   });

ui/helpers/utils/settings-search.test.js

@@ -155,6 +155,7 @@ describe('Settings Search Utils', () => {
       const settingsListExcepted = [
         {
           description: '',
+          id: 1,
           image: 'general-icon.svg',
           route: '/settings/general#currency-conversion',
           section: 'Currency Conversion',
@@ -163,6 +164,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency.',
+          id: 2,
           image: 'general-icon.svg',
           route: '/settings/general#primary-currency',
           section: 'Primary Currenc',
@@ -170,6 +172,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 3,
           image: 'general-icon.svg',
           route: '/settings/general#current-language',
           section: 'Current Language',
@@ -177,6 +180,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 4,
           image: 'general-icon.svg',
           route: '/settings/general#account-identicon',
           section: 'Current Language"',
@@ -184,6 +188,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 5,
           image: 'general-icon.svg',
           route: '/settings/general#zero-balancetokens',
           section: 'Hide Tokens Without Balance',
@@ -192,6 +197,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'State logs contain your public account addresses and sent transactions.',
+          id: 6,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#state-logs',
           section: 'State Logs',
@@ -199,6 +205,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 7,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#sync-withmobile',
           section: 'Sync with mobile',
@@ -207,6 +214,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.',
+          id: 8,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#reset-account',
           section: 'Reset Account',
@@ -215,6 +223,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Select this to show gas price and limit controls directly on the send and confirm screens.',
+          id: 9,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#advanced-gascontrols',
           section: 'Advanced gas controls',
@@ -223,6 +232,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Select this to show the hex data field on the send screen',
+          id: 10,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#show-hexdata',
           section: 'Show Hex Data',
@@ -230,6 +240,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Select this to show fiat conversion on test network',
+          id: 11,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#conversion-testnetworks',
           section: 'Show Conversion on test networks',
@@ -237,6 +248,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Select this to show test networks in network list',
+          id: 12,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#show-testnets',
           section: 'Show test networks',
@@ -245,6 +257,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.',
+          id: 13,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#customize-nonce',
           section: 'Customize transaction nonce',
@@ -253,6 +266,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Set the idle time in minutes before MetaMask will become locked.',
+          id: 14,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#autolock-timer',
           section: 'Auto-Lock Timer (minutes)',
@@ -261,6 +275,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.',
+          id: 15,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#sync-with3box',
           section: 'Sync data with 3Box (experimental)',
@@ -269,6 +284,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Enter the URL of the IPFS CID gateway to use for ENS content resolution.',
+          id: 16,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#ipfs-gateway',
           section: 'IPFS Gateway',
@@ -276,6 +292,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Preferred Ledger Connection Type',
+          id: 17,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#ledger-connection',
           section: 'Preferred Ledger Connection Type',
@@ -284,6 +301,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds',
+          id: 18,
           image: 'advanced-icon.svg',
           route: '/settings/advanced#dimiss-secretrecovery',
           section: 'Dismiss Secret Recovery Phrase backup reminder',
@@ -291,6 +309,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 19,
           image: 'contacts-icon.svg',
           route: '/settings/contact-list',
           section: '',
@@ -298,6 +317,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Reveal Secret Recovery Phrase',
+          id: 20,
           image: 'security-icon.svg',
           route: '/settings/security#reveal-secretrecovery',
           section: 'Reveal Secret Recovery Phrase',
@@ -306,6 +326,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Select this to use Etherscan to show incoming transactions in the transactions list',
+          id: 21,
           image: 'security-icon.svg',
           route: '/settings/security#incoming-transaction',
           section: 'Show Incoming Transactions',
@@ -314,6 +335,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Display a warning for phishing domains targeting Ethereum users',
+          id: 22,
           image: 'security-icon.svg',
           route: '/settings/security#phishing-detection',
           section: 'Use Phishing Detection',
@@ -322,6 +344,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Participate in MetaMetrics to help us make MetaMask better',
+          id: 23,
           image: 'security-icon.svg',
           route: '/settings/security#metrametrics',
           section: 'Participate in MetaMetrics',
@@ -330,6 +353,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'Browsing a website with an unconnected account selected',
+          id: 24,
           image: 'alerts-icon.svg',
           route: '/settings/alerts#unconnected-account',
           section: 'Browsing a website with an unconnected account selected',
@@ -338,6 +362,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'When a website tries to use the removed window.web3 API',
+          id: 25,
           image: 'alerts-icon.svg',
           route: '/settings/alerts#web3-shimusage',
           section: 'When a website tries to use the removed window.web3 API',
@@ -345,6 +370,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Ethereum Mainnet',
+          id: 26,
           image: 'network-icon.svg',
           route: '/settings/networks#networks-mainnet',
           section: 'Ethereum Mainnet',
@@ -352,6 +378,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Ropsten Test Network',
+          id: 27,
           image: 'network-icon.svg',
           route: '/settings/networks#networks-ropsten',
           section: 'Ropsten Test Network',
@@ -359,6 +386,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Rinkeby Test Network',
+          id: 28,
           image: 'network-icon.svg',
           route: '/settings/networks#networks-rinkeby',
           section: 'Rinkeby Test Network',
@@ -366,6 +394,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Goerli Test Network',
+          id: 29,
           image: 'network-icon.svg',
           route: '/settings/networks#networks-goerli',
           section: 'Goerli Test Network',
@@ -373,6 +402,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Kovan Test Network',
+          id: 30,
           image: 'network-icon.svg',
           route: '/settings/networks#networtks-kovan',
           section: 'Kovan Test Network',
@@ -380,6 +410,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Localhost 8545',
+          id: 31,
           image: 'network-icon.svg',
           route: '/settings/networks#network-localhost',
           section: 'Localhost 8545',
@@ -388,6 +419,7 @@ describe('Settings Search Utils', () => {
         {
           description:
             'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.',
+          id: 32,
           image: 'experimental-icon.svg',
           route: '/settings/experimental#token-description',
           section: 'Use Token Detection',
@@ -395,6 +427,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'MetaMask is designed and built around the world.',
+          id: 35,
           image: 'info-icon.svg',
           route: '/settings/about-us#version',
           section: 'MetaMask Version',
@@ -402,6 +435,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: '',
+          id: 36,
           image: 'info-icon.svg',
           route: '/settings/about-us#links',
           section: 'Links',
@@ -409,6 +443,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Privacy Policy',
+          id: 37,
           image: 'info-icon.svg',
           route: '/settings/about-us#privacy-policy',
           section: 'Privacy Policy',
@@ -416,6 +451,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Terms of Use',
+          id: 38,
           image: 'info-icon.svg',
           route: '/settings/about-us#terms',
           section: 'Terms of Use',
@@ -423,6 +459,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Attributions',
+          id: 39,
           image: 'info-icon.svg',
           route: '/settings/about-us#attributions',
           section: 'Attributions',
@@ -430,6 +467,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Visit our Support Center',
+          id: 40,
           image: 'info-icon.svg',
           route: '/settings/about-us#supportcenter',
           section: 'Visit our Support Center',
@@ -437,6 +475,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Visit our web site',
+          id: 41,
           image: 'info-icon.svg',
           route: '/settings/about-us#visitwebsite',
           section: 'Visit our web site',
@@ -444,6 +483,7 @@ describe('Settings Search Utils', () => {
         },
         {
           description: 'Contact us',
+          id: 42,
           image: 'info-icon.svg',
           route: '/settings/about-us#contactus',
           section: 'Contact us',

ui/pages/settings/settings-search-list/settings-search-list.js

@@ -7,26 +7,18 @@ import { I18nContext } from '../../../contexts/i18n';
 export default function SettingsSearchList({ results, onClickSetting }) {
   const t = useContext(I18nContext);
 
-  useEffect(() => {
+  useEffect(highlightSearchedText, [results]);
-    results.forEach((_, i) => {
-      highlightSearchedText(i);
-    });
-  }, [results]);
 
   return (
     <div className="settings-page__header__search__list">
-      {Array(5)
+      {results.slice(0, 5).map((result) => {
-        .fill(undefined)
+        const { image, tab, section, id } = result;
-        .map((_, i) => {
-          const { image, tab, section } = results[i] || {};
-
         return (
           Boolean(image || tab || section) && (
-              <div key={`settings_${i}`}>
+            <div key={`settings_${id}`}>
               <div
-                  key={`res_${i}`}
                 className="settings-page__header__search__list__item"
-                  onClick={() => onClickSetting(results[i])}
+                onClick={() => onClickSetting(result)}
               >
                 <img
                   className="settings-page__header__search__list__item__icon"
@@ -34,7 +26,7 @@ export default function SettingsSearchList({ results, onClickSetting }) {
                 />
 
                 <span
-                    id={`menu-tab_${i}`}
+                  id={`menu-tab_${id}`}
                   className={classnames(
                     'settings-page__header__search__list__item__tab',
                     {
@@ -47,13 +39,12 @@ export default function SettingsSearchList({ results, onClickSetting }) {
                 </span>
                 <div className="settings-page__header__search__list__item__caret" />
                 <span
-                    id={`menu-section_${i}`}
+                  id={`menu-section_${id}`}
                   className={classnames(
                     'settings-page__header__search__list__item__section',
                     {
                       'settings-page__header__search__list__item__section-multiple-lines':
-                          tab === t('securityAndPrivacy') ||
+                        tab === t('securityAndPrivacy') || tab === t('alerts'),
-                          tab === t('alerts'),
                     },
                   )}
                 >

ui/pages/settings/settings.component.js

@@ -144,7 +144,7 @@ class SettingsPage extends PureComponent {
               }}
               settingsRoutesList={getSettingsRoutes(t)}
             />
-            {isSearchList && searchText.length >= 2 && (
+            {isSearchList && searchText.length >= 3 && (
               <SettingsSearchList
                 key=""
                 results={searchResults}