From 6cd3d1fef64c5ed41c0238e9fd9b29bafd214dc1 Mon Sep 17 00:00:00 2001
From: Flo2410 <florian@hye.dev>
Date: Thu, 8 Feb 2024 22:46:48 +0000
Subject: [PATCH] Switch form `document.getElementById` to `useRef`

---
 src/components/widgets/search/search.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 414c99a6..c85a51f7 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -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 { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
@@ -71,6 +71,9 @@ export function getStoredProvider() {
 export default function Search({ options }) {
   const { t } = useTranslation();
 
+  const searchProviderButton = useRef();
+  const comboboxOptions = useRef();
+
   const availableProviderIds = getAvailableProviderIds(options);
 
   const [query, setQuery] = useState("");
@@ -120,11 +123,8 @@ export default function Search({ options }) {
   }, [selectedProvider, options, query, searchSuggestions]);
 
   const handleSearchKeyDown = (event) => {
-    if (
-      event.key === "Tab" &&
-      document.getElementById("comboboxOptions")?.getAttribute("data-headlessui-state") === "open"
-    ) {
-      document.getElementById("searchProviderButton").focus();
+    if (event.key === "Tab" && comboboxOptions.current?.getAttribute("data-headlessui-state") === "open") {
+      searchProviderButton.current.focus();
       event.preventDefault();
     }
   };
@@ -194,7 +194,7 @@ export default function Search({ options }) {
                   text-white font-medium text-sm
                   bg-theme-600/40 dark:bg-white/10
                   focus:ring-theme-500 dark:focus:ring-white/50"
-                  id="searchProviderButton"
+                  ref={searchProviderButton}
                 >
                   <selectedProvider.icon className="text-white w-3 h-3" />
                   <span className="sr-only">{t("search.search")}</span>
@@ -240,7 +240,7 @@ export default function Search({ options }) {
             {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"
-                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">
                   <Combobox.Option key={query} value={query} />