fix highlight search target in ie 11

containers/Search.tsx

@@ -11,10 +11,10 @@ import { scrollIntoView } from '../helpers/utility';
 let timer: ReturnType<typeof setTimeout> = setTimeout(() => '', 100);
 
 let localMatchesMap: MatchType[] = [];
-// const localTotal = 0;
+let localTotal = 0;
 
 const Search: React.FC = () => {
-  // const [isProcessing, setProcessing] = useState(false);
+  const [isProcessing, setProcessing] = useState(false);
   const [matchTotal, setMatchTotal] = useState(0);
 
   const [
@@ -44,17 +44,15 @@ const Search: React.FC = () => {
           page: pageNum,
           index: ele,
         });
-        setMatchesMap(localMatchesMap);
       });
-      // localTotal += matches.length;
-      setMatchTotal(cur => cur + matches.length);
+      localTotal += matches.length;
     }
 
-    // if (pageNum === totalPage) {
-    // setMatchesMap(localMatchesMap);
-    // setMatchTotal(localTotal);
-    // setProcessing(false);
-    // }
+    if (pageNum === totalPage) {
+      setMatchesMap(localMatchesMap);
+      setMatchTotal(localTotal);
+      setProcessing(false);
+    }
 
     if (pageNum < totalPage) {
       await getMatchTextIndex(pageNum + 1, queryStr);
@@ -67,7 +65,7 @@ const Search: React.FC = () => {
 
   const reset = (): void => {
     localMatchesMap = [];
-    // localTotal = 0;
+    localTotal = 0;
     setMatchesMap([]);
     setMatchTotal(0);
     setCurrentIndex(-1);
@@ -79,7 +77,7 @@ const Search: React.FC = () => {
 
     const newQueryString = normalize(val.toLowerCase());
     if (newQueryString !== queryString) {
-      // setProcessing(true);
+      setProcessing(true);
       reset();
       setQueryString(newQueryString);
       startSearchPdf(newQueryString);
@@ -105,20 +103,16 @@ const Search: React.FC = () => {
       ) as HTMLDivElement;
 
       if (textLayer) {
-        const spans = textLayer.querySelectorAll(`[class="${id}"]`) as NodeList;
-
-        if (spans.length > 0) {
-          spans.forEach((ele: Node) => {
-            // eslint-disable-next-line no-param-reassign
-            (ele as HTMLElement).style.backgroundColor = color;
-          });
+        const span = textLayer.querySelector(`[class="${id}"]`);
+        if (span) {
+          (span as HTMLElement).style.backgroundColor = color;
         } else {
           highlightTarget(match, color);
         }
       } else {
         highlightTarget(match, color);
       }
-    }, 300);
+    }, 200);
   };
 
   const handleClickPrev = (): void => {
@@ -164,7 +158,7 @@ const Search: React.FC = () => {
     if (currentIndex >= 0) {
       clearTimeout(timer);
       const match = matchesMap[currentIndex];
-      highlightTarget(match, 'rgba(255, 141, 0)');
+      highlightTarget(match, 'rgb(255, 141, 0)');
     }
   }, [currentIndex, matchesMap]);
 
@@ -177,7 +171,7 @@ const Search: React.FC = () => {
       onEnter={handleSearch}
       isActive={navbarState === 'search'}
       close={handleClose}
-      isProcessing={false}
+      isProcessing={isProcessing}
     />
   );
 };