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