All files / src/hooks useScrollToOmdbKey.ts

100% Statements 13/13
75% Branches 3/4
100% Functions 2/2
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30              5x             5x 334x 334x 334x 96x 96x 2x 2x 2x   2x   2x      
// SPDX-License-Identifier: GPL-3.0-only
// Copyright (C) 2026 Max Boksem. See NOTICE for additional terms under GPLv3 section 7.
 
import { useEffect, type RefObject } from "react";
import { useLocation, useNavigate } from "react-router";
 
/** Route state that opens Settings at the OMDb key field. */
export const OMDB_KEY_FOCUS = { focus: "omdb" } as const;
 
/**
 * Scrolls Settings to the OMDb key field and focuses it when the hint in an
 * info sheet opened the page, then clears the route state so going back to
 * that entry doesn't do it again.
 */
export const useScrollToOmdbKey = (ref: RefObject<HTMLInputElement | null>) => {
	const location = useLocation();
	const navigate = useNavigate();
	useEffect(() => {
		const state = location.state as { focus?: string } | null;
		if (state?.focus !== OMDB_KEY_FOCUS.focus) return;
		const input = ref.current;
		Eif (input) {
			input.scrollIntoView({ block: "center", behavior: "smooth" });
			// Focusing scrolls at once, which would cut the smooth scroll short.
			input.focus({ preventScroll: true });
		}
		navigate(location.pathname, { replace: true, state: null });
	}, [location.state, location.pathname, navigate, ref]);
};