8x48/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-12-24 05:48:08 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix: restore clickable suggestions in search widget (#6069)

Browse Source
This commit is contained in:
shamoon
2025-12-10 07:32:29 -08:00
committed by GitHub
parent 0dcd25d5ad
commit a07cc25441
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,13 @@
import { Combobox, Listbox, Transition } from "@headlessui/react"; import {
Combobox,
ComboboxOption,
ComboboxOptions,
Listbox,
ListboxButton,
ListboxOption,
ListboxOptions,
Transition,
} from "@headlessui/react";
import classNames from "classnames"; import classNames from "classnames";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { Fragment, useEffect, useState } from "react"; import { Fragment, useEffect, useState } from "react";
@@ -189,7 +198,7 @@ export default function Search({ options }) {
disabled={availableProviderIds?.length === 1} disabled={availableProviderIds?.length === 1}
> >
<div> <div>
<Listbox.Button <ListboxButton
className=" className="
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2
text-white font-medium text-sm text-white font-medium text-sm
@@ -198,7 +207,7 @@ export default function Search({ options }) {
> >
<selectedProvider.icon className="text-white w-3 h-3" /> <selectedProvider.icon className="text-white w-3 h-3" />
<span className="sr-only">{t("search.search")}</span> <span className="sr-only">{t("search.search")}</span>
</Listbox.Button> </ListboxButton>
</div> </div>
<Transition <Transition
as={Fragment} as={Fragment}
@@ -209,7 +218,7 @@ export default function Search({ options }) {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options <ListboxOptions
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
bg-theme-100 dark:bg-theme-600 shadow-lg bg-theme-100 dark:bg-theme-600 shadow-lg
ring-1 ring-black ring-opacity-5 focus:outline-hidden" ring-1 ring-black ring-opacity-5 focus:outline-hidden"
@@ -218,7 +227,7 @@ export default function Search({ options }) {
{availableProviderIds.map((providerId) => { {availableProviderIds.map((providerId) => {
const p = searchProviders[providerId]; const p = searchProviders[providerId];
return ( return (
<Listbox.Option key={providerId} value={p} as={Fragment}> <ListboxOption key={providerId} value={p} as={Fragment}>
{({ active }) => ( {({ active }) => (
<li <li
className={classNames( className={classNames(
@@ -229,23 +238,23 @@ export default function Search({ options }) {
<p.icon className="h-4 w-4 mx-4 my-2" /> <p.icon className="h-4 w-4 mx-4 my-2" />
</li> </li>
)} )}
</Listbox.Option> </ListboxOption>
); );
})} })}
</div> </div>
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
</Listbox> </Listbox>
{searchSuggestions[1]?.length > 0 && ( {searchSuggestions[1]?.length > 0 && (
<Combobox.Options className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg"> <ComboboxOptions className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg">
<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} /> <ComboboxOption key={query} value={query} />
{searchSuggestions[1].map((suggestion) => ( {searchSuggestions[1].map((suggestion) => (
<Combobox.Option <ComboboxOption
key={suggestion} key={suggestion}
value={suggestion} value={suggestion}
onClick={() => { onMouseDown={() => {
doSearch(suggestion); doSearch(suggestion);
}} }}
className="flex w-full" className="flex w-full"
@@ -266,10 +275,10 @@ export default function Search({ options }) {
</div> </div>
); );
}} }}
</Combobox.Option> </ComboboxOption>
))} ))}
</div> </div>
</Combobox.Options> </ComboboxOptions>
)} )}
</Combobox> </Combobox>
</div> </div>