Function SuggestionControlInner

frontend/app/suggestion/suggestion.tsx:170–346

({
    anchorRef,
    onClose,
    onSelect,
    onTab,
    fetchSuggestions,
    className,
    placeholderText,
    children,
}: SuggestionControlInnerProps)

type SuggestionControlInnerProps = Omit<SuggestionControlProps, "isOpen">;

function SuggestionControlInner({
    anchorRef,
    onClose,
    onSelect,
    onTab,
    fetchSuggestions,
    className,
    placeholderText,
    children,
}: SuggestionControlInnerProps) {
    const widgetId = useId();
    const [query, setQuery] = useState("");
    const reqNumRef = useRef(0);
    let [suggestions, setSuggestions] = useState<SuggestionType[]>([]);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [fetched, setFetched] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);
    const dropdownRef = useRef<HTMLDivElement>(null);
    const { refs, floatingStyles, middlewareData } = useFloating({
        placement: "bottom",
        strategy: "absolute",
        middleware: [offset(-1)],
    });
    const emptyStateChild = React.Children.toArray(children).find(
        (child) => React.isValidElement(child) && child.type === SuggestionControlNoResults
    );
    const noDataChild = React.Children.toArray(children).find(
        (child) => React.isValidElement(child) && child.type === SuggestionControlNoData
    );

    useEffect(() => {
        refs.setReference(anchorRef.current);
    }, [anchorRef.current]);

    useEffect(() => {
        reqNumRef.current++;
        fetchSuggestions(query, { widgetid: widgetId, reqnum: reqNumRef.current }).then((results) => {
            if (results.reqnum !== reqNumRef.current) {
                return;
            }
            setSuggestions(results.suggestions ?? []);
            setFetched(true);
        });
    }, [query, fetchSuggestions]);

    useEffect(() => {
        return () => {
            reqNumRef.current++;
            fetchSuggestions("", { widgetid: widgetId, reqnum: reqNumRef.current, dispose: true });
        };
    }, []);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {