OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added tab complete to search box.

Browse Source
This commit is contained in:
Flo2410 2024-02-08 19:54:12 +00:00
parent 08b1d56cd7
commit c41f839a6a
No known key found for this signature in database
GPG Key ID: 8ECB00AC5216DC7F
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,8 +121,19 @@ export default function Search({ options }) {
const handleSearchKeyDown = (event) => { const handleSearchKeyDown = (event) => {
if (event.key === "Tab") { if (event.key === "Tab") {
// TODO: add actual tab complete
event.preventDefault(); event.preventDefault();
const list = document.getElementById("comboboxOptions").getElementsByTagName("li");
if (list.length === 0) {
return;
}
for (let i = 0; i < list.length; i += 1) {
const item = list.item(i);
if (item.getAttribute("data-headlessui-state") === "active") {
setQuery(item.textContent);
}
}
} }
}; };
@ -233,7 +244,10 @@ export default function Search({ options }) {
</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"> <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"
id="comboboxOptions"
>
<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) => (