fix(search): replace createRef with useRef for microphone icon

src/features/search/Search.jsx

@@ -1,9 +1,11 @@
 /* global chrome */
 import variables from 'config/variables';
-import { memo, createRef, useEffect, useState, useCallback } from 'react';
+import { memo, useRef, useEffect, useState, useCallback } from 'react';
 import { MdSearch, MdMic } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
 
+import EventBus from 'utils/eventbus';
+
 import './search.scss';
 
 function Search() {
@@ -12,7 +14,7 @@ function Search() {
     localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons',
   );
 
-  const micIcon = createRef();
+  const micIcon = useRef(null);
 
   const startSpeechRecognition = useCallback(() => {
     const voiceSearch = new window.webkitSpeechRecognition();
@@ -64,8 +66,10 @@ function Search() {
           <MdMic className="micIcon" />
         </button>,
       );
+    } else {
+      setMicrophone(null);
     }
-  }, [micIcon, startSpeechRecognition]);
+  }, [startSpeechRecognition]);
 
   useEffect(() => {
     init();
@@ -75,6 +79,12 @@ function Search() {
         element.focus();
       }
     }
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'search') {
+        init();
+      }
+    });
   }, [init]);
 
   function searchButton(e) {

src/features/search/options/SearchOptions.jsx

@@ -6,47 +6,48 @@ import { Checkbox } from 'components/Form/Settings';
 
 import EventBus from 'utils/eventbus';
 
-const SearchOptions = () => {
-  const SEARCH_SECTION = 'modals.main.settings.sections.search';
+const SEARCH_SECTION = 'modals.main.settings.sections.search';
 
-  const ChromePolicyWarning = () => {
-    return (
-      <div className="itemWarning" style={{ marginBottom: '20px' }}>
-        <MdOutlineWarning />
-        <div className="text">
-          <span className="header">Search Engine Selection Removed</span>
-          <span>{variables.getMessage(`${SEARCH_SECTION}.chrome_policy_warning`)}</span>
-        </div>
+const ChromePolicyWarning = () => {
+  return (
+    <div className="itemWarning" style={{ marginBottom: '20px' }}>
+      <MdOutlineWarning />
+      <div className="text">
+        <span className="header">Search Engine Selection Removed</span>
+        <span>{variables.getMessage(`${SEARCH_SECTION}.chrome_policy_warning`)}</span>
       </div>
-    );
-  };
+    </div>
+  );
+};
 
-  const AdditionalOptions = () => {
-    return (
-      <Row final={true}>
-        <Content
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
-        />
-        <Action>
-          {/* not supported on firefox */}
-          {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
-            <Checkbox
-              name="voiceSearch"
-              text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
-              category="search"
-            />
-          ) : null}
+const AdditionalOptions = () => {
+  return (
+    <Row final={true}>
+      <Content
+        title={variables.getMessage('modals.main.settings.additional_settings')}
+        subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
+      />
+      <Action>
+        {/* not supported on firefox */}
+        {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
           <Checkbox
-            name="searchFocus"
-            text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
+            name="voiceSearch"
+            text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
             category="search"
-            element=".other"
           />
-        </Action>
-      </Row>
-    );
-  };
+        ) : null}
+        <Checkbox
+          name="searchFocus"
+          text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
+          category="search"
+          element=".other"
+        />
+      </Action>
+    </Row>
+  );
+};
+
+const SearchOptions = () => {
 
   return (
     <>