fix: Clear search chip highlight when opening CMD+F (#13135)

app/editor/components/FindAndReplace.tsx

@@ -22,6 +22,7 @@ import {
   PopoverTrigger,
   PopoverContent,
 } from "~/components/primitives/Popover";
+import { useClearSearchHighlight } from "~/hooks/useClearSearchHighlight";
 import useKeyDown from "~/hooks/useKeyDown";
 import Desktop from "~/utils/Desktop";
 import { useEditor } from "./EditorContext";
@@ -106,6 +107,7 @@ export default function FindAndReplace({
   const inputReplaceRef = React.useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
   const theme = useTheme();
+  const clearSearchHighlight = useClearSearchHighlight();
   const [showReplace, setShowReplace] = React.useState(false);
   const [caseSensitive, setCaseSensitive] = React.useState(false);
   const [regexEnabled, setRegex] = React.useState(false);
@@ -336,6 +338,8 @@ export default function FindAndReplace({
   React.useEffect(() => {
     if (localOpen) {
       onOpen();
+      // The find controls take over highlighting from here.
+      clearSearchHighlight();
       const startSearchText = selectionRef.current || searchTerm;
 
       editor.commands.find({

app/hooks/useClearSearchHighlight.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { patchLocation } from "~/utils/history";
+
+/**
+ * Hook to remove the search highlight term from the current url.
+ *
+ * @returns a callback that clears the search highlight query param.
+ */
+export function useClearSearchHighlight() {
+  const history = useHistory();
+
+  return useCallback(() => {
+    const location = history.location;
+    const params = new URLSearchParams(location.search);
+    if (!params.has("q")) {
+      return;
+    }
+
+    params.delete("q");
+    const search = params.toString();
+    history.replace(
+      patchLocation(location, { search: search ? `?${search}` : "" })
+    );
+  }, [history]);
+}

app/scenes/Document/components/SearchHighlightChip.tsx

@@ -1,30 +1,25 @@
 import { CloseIcon } from "outline-icons";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { useDocumentContext } from "~/components/DocumentContext";
 import Tooltip from "~/components/Tooltip";
-import { patchLocation } from "~/utils/history";
+import { useClearSearchHighlight } from "~/hooks/useClearSearchHighlight";
 import { undraggableOnDesktop } from "~/styles";
 
 export function SearchHighlightChip() {
   const { t } = useTranslation();
   const { editor } = useDocumentContext();
-  const history = useHistory();
   const location = useLocation();
+  const clearSearchHighlight = useClearSearchHighlight();
   const searchHighlight = new URLSearchParams(location.search).get("q");
 
   const handleClick = useCallback(() => {
     editor?.commands.clearSearch();
-    const params = new URLSearchParams(location.search);
-    params.delete("q");
-    const search = params.toString();
-    history.replace(
-      patchLocation(location, { search: search ? `?${search}` : "" })
-    );
-  }, [editor, history, location]);
+    clearSearchHighlight();
+  }, [editor, clearSearchHighlight]);
 
   if (!searchHighlight) {
     return null;