diff --git a/app/components/ui/Navigation/NavigationFocusReset.tsx b/app/components/ui/Navigation/NavigationFocusReset.tsx index 49558c258..446a29cbc 100644 --- a/app/components/ui/Navigation/NavigationFocusReset.tsx +++ b/app/components/ui/Navigation/NavigationFocusReset.tsx @@ -1,17 +1,28 @@ import React, { useEffect, useRef } from "react"; import { useLocation } from "react-router-dom"; -// Resets focus state for a11y, by focusing and unfocusing an off-screen element at the top of the page when page location changes - -export const NavigationFocusReset = () => { +/* + Resets focus state for a11y by focusing and unfocusing an off-screen element + at the top of the page when the page location changes. + The focus reset occurs on all page location changes except when only the query string changes. +*/ +export const NavigationFocusReset: React.FC = () => { const location = useLocation(); const hiddenInputRef = useRef(null); + const previousPathRef = useRef(""); useEffect(() => { - if (hiddenInputRef.current) { + const currentPath = location.pathname + location.search; + + const pathChanged = currentPath !== previousPathRef.current; + + // Focus reset should occur if the path changed and it's not just a query string change + if (pathChanged && !location.search && hiddenInputRef.current) { hiddenInputRef.current.focus(); hiddenInputRef.current.blur(); } + + previousPathRef.current = currentPath; }, [location]); return (