Don't prevent default when tracked object details description input is focused (#16064)

This commit is contained in:
Josh Hawkins 2025-01-20 07:23:22 -06:00 committed by GitHub
parent 83ac42cbdc
commit aedfaa3641
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 0 deletions

View File

@ -85,6 +85,7 @@ type SearchDetailDialogProps = {
setSearch: (search: SearchResult | undefined) => void; setSearch: (search: SearchResult | undefined) => void;
setSearchPage: (page: SearchTab) => void; setSearchPage: (page: SearchTab) => void;
setSimilarity?: () => void; setSimilarity?: () => void;
setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
}; };
export default function SearchDetailDialog({ export default function SearchDetailDialog({
search, search,
@ -92,6 +93,7 @@ export default function SearchDetailDialog({
setSearch, setSearch,
setSearchPage, setSearchPage,
setSimilarity, setSimilarity,
setInputFocused,
}: SearchDetailDialogProps) { }: SearchDetailDialogProps) {
const { data: config } = useSWR<FrigateConfig>("config", { const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false, revalidateOnFocus: false,
@ -232,6 +234,7 @@ export default function SearchDetailDialog({
config={config} config={config}
setSearch={setSearch} setSearch={setSearch}
setSimilarity={setSimilarity} setSimilarity={setSimilarity}
setInputFocused={setInputFocused}
/> />
)} )}
{page == "snapshot" && ( {page == "snapshot" && (
@ -266,12 +269,14 @@ type ObjectDetailsTabProps = {
config?: FrigateConfig; config?: FrigateConfig;
setSearch: (search: SearchResult | undefined) => void; setSearch: (search: SearchResult | undefined) => void;
setSimilarity?: () => void; setSimilarity?: () => void;
setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
}; };
function ObjectDetailsTab({ function ObjectDetailsTab({
search, search,
config, config,
setSearch, setSearch,
setSimilarity, setSimilarity,
setInputFocused,
}: ObjectDetailsTabProps) { }: ObjectDetailsTabProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
@ -283,6 +288,14 @@ function ObjectDetailsTab({
const [desc, setDesc] = useState(search?.data.description); 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 // we have to make sure the current selected search item stays in sync
useEffect(() => setDesc(search?.data.description ?? ""), [search]); useEffect(() => setDesc(search?.data.description ?? ""), [search]);
@ -499,6 +512,8 @@ function ObjectDetailsTab({
placeholder="Description of the tracked object" placeholder="Description of the tracked object"
value={desc} value={desc}
onChange={(e) => setDesc(e.target.value)} onChange={(e) => setDesc(e.target.value)}
onFocus={handleDescriptionFocus}
onBlur={handleDescriptionBlur}
/> />
</> </>
)} )}

View File

@ -444,6 +444,7 @@ export default function SearchView({
setSimilarity={ setSimilarity={
searchDetail && (() => setSimilaritySearch(searchDetail)) searchDetail && (() => setSimilaritySearch(searchDetail))
} }
setInputFocused={setInputFocused}
/> />
<div <div