diff --git a/src/rdap/components/LookupInput.tsx b/src/rdap/components/LookupInput.tsx index 3828fca..99df1bf 100644 --- a/src/rdap/components/LookupInput.tsx +++ b/src/rdap/components/LookupInput.tsx @@ -1,6 +1,6 @@ import { useForm, Controller } from "react-hook-form"; import type { FunctionComponent } from "react"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { onPromise, preventDefault } from "@/lib/utils"; import type { SimplifiedTargetType, SubmitProps, TargetType } from "@/rdap/schemas"; import { TargetTypeEnum } from "@/rdap/schemas"; @@ -96,6 +96,12 @@ const LookupInput: FunctionComponent = ({ */ const [showingPlaceholder, setShowingPlaceholder] = useState(false); + /** + * Tracks whether the input is currently focused. + * Used to restore focus after loading completes. + */ + const isFocusedRef = useRef(false); + /** * Retrieves the target type based on the provided value. * @param value - The value to retrieve the target type for. @@ -123,6 +129,19 @@ const LookupInput: FunctionComponent = ({ } }, [detectedType]); + /** + * Restore focus to the input when loading completes. + * Only refocus if the input was focused when loading started. + */ + useEffect(() => { + if (!isLoading && isFocusedRef.current) { + const inputElement = document.getElementById("search"); + if (inputElement) { + inputElement.focus(); + } + } + }, [isLoading]); + return (
= ({ size="3" placeholder={placeholders[selected]} disabled={isLoading} + onFocus={() => { + isFocusedRef.current = true; + }} + onBlur={() => { + // Don't clear focus state if we're loading (input is being disabled) + // so we can restore focus when loading completes + if (!isLoading) { + isFocusedRef.current = false; + } + }} {...register("target", { required: true, onChange: () => {