diff --git a/changes/36643-fix-back-button-policies-reports b/changes/36643-fix-back-button-policies-reports new file mode 100644 index 0000000000..1e9519e7ce --- /dev/null +++ b/changes/36643-fix-back-button-policies-reports @@ -0,0 +1 @@ +* Fixed browser back button requiring an extra click to leave the Policies and Reports pages. diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx index 4f5dfe5ddf..c35a796342 100644 --- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx @@ -1,5 +1,11 @@ // TODO: make 'queryParams', 'router', and 'tableQueryData' dependencies stable (aka, memoized) -import React, { useCallback, useContext, useEffect, useState } from "react"; +import React, { + useCallback, + useContext, + useEffect, + useRef, + useState, +} from "react"; import { useQuery, useQueryClient } from "react-query"; import { InjectedRouter } from "react-router/lib/Router"; import PATHS from "router/paths"; @@ -223,6 +229,8 @@ const ManagePolicyPage = ({ : null; })(); + const isFirstNavigation = useRef(true); + // Needs update on location change or table state might not match URL const [searchQuery, setSearchQuery] = useState(initialSearchQuery); const [ @@ -496,7 +504,12 @@ const ManagePolicyPage = ({ queryParams: { ...queryParams, ...newQueryParams }, }); - router?.push(locationPath); + if (isFirstNavigation.current) { + isFirstNavigation.current = false; + router?.replace(locationPath); + } else { + router?.push(locationPath); + } }, [ isRouteOk, diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx index 3dc681164e..7d6e7cd9f0 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import React, { useContext, useCallback, useMemo } from "react"; +import React, { useContext, useCallback, useMemo, useRef } from "react"; import { InjectedRouter } from "react-router"; import { Row } from "react-table"; import { SingleValue } from "react-select-5"; @@ -97,6 +97,7 @@ const QueriesTable = ({ isPremiumTier, }: IQueriesTableProps): JSX.Element | null => { const { currentUser, config } = useContext(AppContext); + const isFirstNavigation = useRef(true); // Functions to avoid race conditions // TODO - confirm these are still necessary @@ -159,7 +160,12 @@ const QueriesTable = ({ queryParams: { ...queryParams, ...newQueryParams }, }); - router?.push(locationPath); + if (isFirstNavigation.current) { + isFirstNavigation.current = false; + router?.replace(locationPath); + } else { + router?.push(locationPath); + } }, [ curTargetedPlatformFilter,