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

Switch form document.getElementById to useRef

Browse Source
This commit is contained in:
Flo2410 2024-02-08 22:46:48 +00:00
parent ffad5d247e
commit 6cd3d1fef6
No known key found for this signature in database
GPG Key ID: 8ECB00AC5216DC7F
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, Fragment } from "react"; import { useState, useEffect, useCallback, Fragment, useRef } 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";
@ -71,6 +71,9 @@ export function getStoredProvider() {
export default function Search({ options }) { export default function Search({ options }) {
const { t } = useTranslation(); const { t } = useTranslation();
const searchProviderButton = useRef();
const comboboxOptions = useRef();
const availableProviderIds = getAvailableProviderIds(options); const availableProviderIds = getAvailableProviderIds(options);
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
@ -120,11 +123,8 @@ export default function Search({ options }) {
}, [selectedProvider, options, query, searchSuggestions]); }, [selectedProvider, options, query, searchSuggestions]);
const handleSearchKeyDown = (event) => { const handleSearchKeyDown = (event) => {
if ( if (event.key === "Tab" && comboboxOptions.current?.getAttribute("data-headlessui-state") === "open") {
event.key === "Tab" && searchProviderButton.current.focus();
document.getElementById("comboboxOptions")?.getAttribute("data-headlessui-state") === "open"
) {
document.getElementById("searchProviderButton").focus();
event.preventDefault(); event.preventDefault();
} }
}; };
@ -194,7 +194,7 @@ export default function Search({ options }) {
text-white font-medium text-sm text-white font-medium text-sm
bg-theme-600/40 dark:bg-white/10 bg-theme-600/40 dark:bg-white/10
focus:ring-theme-500 dark:focus:ring-white/50" focus:ring-theme-500 dark:focus:ring-white/50"
id="searchProviderButton" ref={searchProviderButton}
> >
<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>
@ -240,7 +240,7 @@ export default function Search({ options }) {
{searchSuggestions[1]?.length > 0 && ( {searchSuggestions[1]?.length > 0 && (
<Combobox.Options <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" 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" ref={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} />