From aedfaa3641e28c893b13c96c3287b752036ff600 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 20 Jan 2025 07:23:22 -0600
Subject: [PATCH] Don't prevent default when tracked object details description
 input is focused (#16064)

---
 .../overlay/detail/SearchDetailDialog.tsx         | 15 +++++++++++++++
 web/src/views/search/SearchView.tsx               |  1 +
 2 files changed, 16 insertions(+)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 2ead377a5..45aabb07c 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -85,6 +85,7 @@ type SearchDetailDialogProps = {
   setSearch: (search: SearchResult | undefined) => void;
   setSearchPage: (page: SearchTab) => void;
   setSimilarity?: () => void;
+  setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default function SearchDetailDialog({
   search,
@@ -92,6 +93,7 @@ export default function SearchDetailDialog({
   setSearch,
   setSearchPage,
   setSimilarity,
+  setInputFocused,
 }: SearchDetailDialogProps) {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
@@ -232,6 +234,7 @@ export default function SearchDetailDialog({
             config={config}
             setSearch={setSearch}
             setSimilarity={setSimilarity}
+            setInputFocused={setInputFocused}
           />
         )}
         {page == "snapshot" && (
@@ -266,12 +269,14 @@ type ObjectDetailsTabProps = {
   config?: FrigateConfig;
   setSearch: (search: SearchResult | undefined) => void;
   setSimilarity?: () => void;
+  setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 function ObjectDetailsTab({
   search,
   config,
   setSearch,
   setSimilarity,
+  setInputFocused,
 }: ObjectDetailsTabProps) {
   const apiHost = useApiHost();
 
@@ -283,6 +288,14 @@ function ObjectDetailsTab({
 
   const [desc, setDesc] = useState(search?.data.description);
 
+  const handleDescriptionFocus = useCallback(() => {
+    setInputFocused(true);
+  }, [setInputFocused]);
+
+  const handleDescriptionBlur = useCallback(() => {
+    setInputFocused(false);
+  }, [setInputFocused]);
+
   // we have to make sure the current selected search item stays in sync
   useEffect(() => setDesc(search?.data.description ?? ""), [search]);
 
@@ -499,6 +512,8 @@ function ObjectDetailsTab({
               placeholder="Description of the tracked object"
               value={desc}
               onChange={(e) => setDesc(e.target.value)}
+              onFocus={handleDescriptionFocus}
+              onBlur={handleDescriptionBlur}
             />
           </>
         )}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index be430f134..e3995d7d9 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -444,6 +444,7 @@ export default function SearchView({
         setSimilarity={
           searchDetail && (() => setSimilaritySearch(searchDetail))
         }
+        setInputFocused={setInputFocused}
       />
 
       <div