Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix: search opens when losing focus, prevent unnecessary search API calls (#2867)

Browse Source 
Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
Florian Hye 2024-02-09 16:49:25 +01:00 committed by shamoon
parent 3955743590
commit 3b76772f81
2 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/quicklaunch.jsx
View File

@ -120,7 +120,7 @@ export default function QuickLaunch({
}); });
if (showSearchSuggestions && searchProvider.suggestionUrl) { if (showSearchSuggestions && searchProvider.suggestionUrl) {
if (searchString.trim() !== searchSuggestions[0]) { if (searchString.trim() !== searchSuggestions[0]?.trim()) {
fetch( fetch(
`/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${ `/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
searchProvider.name ?? "Custom" searchProvider.name ?? "Custom"

81
src/components/widgets/search/search.jsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, Fragment } from "react"; import { useState, useEffect, Fragment } from "react";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { FiSearch } from "react-icons/fi"; import { FiSearch } from "react-icons/fi";
import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si"; import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
@ -119,20 +119,27 @@ export default function Search({ options }) {
}; };
}, [selectedProvider, options, query, searchSuggestions]); }, [selectedProvider, options, query, searchSuggestions]);
const submitCallback = useCallback( let currentSuggestion;
(value) => {
const q = encodeURIComponent(value);
const { url } = selectedProvider;
if (url) {
window.open(`${url}${q}`, options.target || "_blank");
} else {
window.open(`${options.url}${q}`, options.target || "_blank");
}
setQuery(""); function doSearch(value) {
}, const q = encodeURIComponent(value);
[selectedProvider, options.url, options.target], const { url } = selectedProvider;
); if (url) {
window.open(`${url}${q}`, options.target || "_blank");
} else {
window.open(`${options.url}${q}`, options.target || "_blank");
}
setQuery("");
currentSuggestion = null;
}
const handleSearchKeyDown = (event) => {
const useSuggestion = searchSuggestions.length && currentSuggestion;
if (event.key === "Enter") {
doSearch(useSuggestion ? currentSuggestion : event.target.value);
}
};
if (!availableProviderIds) { if (!availableProviderIds) {
return null; return null;
@ -148,7 +155,7 @@ export default function Search({ options }) {
<Raw> <Raw>
<div className="flex-col relative h-8 my-4 min-w-fit z-20"> <div className="flex-col relative h-8 my-4 min-w-fit z-20">
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" /> <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<Combobox value={query} onChange={submitCallback}> <Combobox value={query}>
<Combobox.Input <Combobox.Input
type="text" type="text"
className=" className="
@ -160,13 +167,17 @@ export default function Search({ options }) {
focus:border-theme-500 dark:focus:border-white/50 focus:border-theme-500 dark:focus:border-white/50
border border-theme-300 dark:border-theme-200/50" border border-theme-300 dark:border-theme-200/50"
placeholder={t("search.placeholder")} placeholder={t("search.placeholder")}
onChange={(event) => setQuery(event.target.value)} onChange={(event) => {
setQuery(event.target.value);
}}
required required
autoCapitalize="off" autoCapitalize="off"
autoCorrect="off" autoCorrect="off"
autoComplete="off" autoComplete="off"
// eslint-disable-next-line jsx-a11y/no-autofocus // eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={options.focus} autoFocus={options.focus}
onBlur={(e) => e.preventDefault()}
onKeyDown={handleSearchKeyDown}
/> />
<Listbox <Listbox
as="div" as="div"
@ -229,20 +240,30 @@ export default function Search({ options }) {
<div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs"> <div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
<Combobox.Option key={query} value={query} /> <Combobox.Option key={query} value={query} />
{searchSuggestions[1].map((suggestion) => ( {searchSuggestions[1].map((suggestion) => (
<Combobox.Option key={suggestion} value={suggestion} className="flex w-full"> <Combobox.Option
{({ active }) => ( key={suggestion}
<div value={suggestion}
className={classNames( onClick={() => {
"px-2 py-1 rounded-md w-full flex-nowrap", doSearch(suggestion);
active ? "bg-theme-300/20 dark:bg-white/10" : "", }}
)} className="flex w-full"
> >
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span> {({ active }) => {
<span className="mr-4 whitespace-pre opacity-50"> if (active) currentSuggestion = suggestion;
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion} return (
</span> <div
</div> className={classNames(
)} "px-2 py-1 rounded-md w-full flex-nowrap",
active ? "bg-theme-300/20 dark:bg-white/10" : "",
)}
>
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
<span className="mr-4 whitespace-pre opacity-50">
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
</span>
</div>
);
}}
</Combobox.Option> </Combobox.Option>
))} ))}
</div> </div>