fix: fix auto focus for inputs (#1040)

just don't look at the internals and you'll be good.

src/components/Collection/Tmdb/EpisodeSelect.tsx

@@ -123,6 +123,7 @@ const EpisodeSelect = React.memo((props: Props) => {
           className="z-[110] w-[var(--button-width)] rounded-lg bg-panel-background focus:outline-none"
         >
           <Input
+            autoFocus
             id="episode-search"
             type="text"
             value={searchText}

src/components/Input/Input.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import type { PlacesType } from 'react-tooltip';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
 import { BodyVisibleContext } from '@/core/router';
+import useAutoFocusRef from '@/hooks/useAutoFocusRef';
 
 type EndIcon = {
   icon: string;
@@ -42,7 +43,7 @@ type TooltipAttributes = {
 
 const Input = React.memo((props: Props) => {
   const {
-    autoFocus,
+    autoFocus = false,
     center,
     className,
     disabled,
@@ -64,15 +65,9 @@ const Input = React.memo((props: Props) => {
   } = props;
 
   const bodyVisible = useContext(BodyVisibleContext);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useAutoFocusRef(autoFocus, bodyVisible);
   const [isShow, setIsShow] = React.useState(false);
 
-  useEffect(() => {
-    if (autoFocus && bodyVisible && inputRef.current) {
-      inputRef.current?.focus();
-    }
-  }, [autoFocus, bodyVisible]);
-
   useEffect(() => {
     if (isOverlay) return;
     setIsShow(_ => false);

src/hooks/useAutoFocusRef.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+
+import useEventCallback from './useEventCallback';
+
+function useAutoFocusRef(autoFocus: boolean, bodyVisible: boolean): React.MutableRefObject<HTMLInputElement | null> {
+  // eslint-disable-next-line no-undef
+  const ref: React.MutableRefObject<HTMLInputElement | null> & { timeout?: NodeJS.Timeout } = useEventCallback(
+    (element: HTMLInputElement | null) => {
+      ref.current = element;
+      if (autoFocus && bodyVisible && element) {
+        if (ref.timeout) clearTimeout(ref.timeout);
+        ref.timeout = setTimeout(() => {
+          if (ref.timeout) delete ref.timeout;
+          element.focus();
+        }, 0);
+      }
+    },
+    // eslint-disable-next-line no-undef
+  ) as unknown as React.MutableRefObject<HTMLInputElement> & { timeout?: NodeJS.Timeout };
+  return ref;
+}
+
+export default useAutoFocusRef;