fix: navigating back results in navigation back to first page opened (#3224)
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import type { MouseEvent } from "react";
|
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
@@ -204,17 +203,22 @@ const SelectBoardsMenu = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const anchorSelector = "a[href]:not([target='_blank'])";
|
||||||
const usePreventLeaveWithDirty = (isDirty: boolean) => {
|
const usePreventLeaveWithDirty = (isDirty: boolean) => {
|
||||||
const t = useI18n();
|
const t = useI18n();
|
||||||
const { openConfirmModal } = useConfirmModal();
|
const { openConfirmModal } = useConfirmModal();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClick = (event: MouseEvent<HTMLElement>) => {
|
if (!isDirty) return;
|
||||||
|
|
||||||
|
const handleClick = (event: Event) => {
|
||||||
const target = (event.target as HTMLElement).closest("a");
|
const target = (event.target as HTMLElement).closest("a");
|
||||||
|
|
||||||
if (!target) return;
|
if (!target) {
|
||||||
if (!isDirty) return;
|
console.warn("No anchor element found for click event", event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
@@ -231,33 +235,29 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handlePopState = (event: Event) => {
|
const handlePopState = (event: Event) => {
|
||||||
if (isDirty) {
|
window.history.pushState(null, document.title, window.location.href);
|
||||||
window.history.pushState(null, document.title, window.location.href);
|
event.preventDefault();
|
||||||
event.preventDefault();
|
|
||||||
} else {
|
|
||||||
window.history.back();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
|
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
|
||||||
if (!isDirty) return;
|
|
||||||
if (env.NODE_ENV === "development") return; // Allow to reload in development
|
if (env.NODE_ENV === "development") return; // Allow to reload in development
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.returnValue = true;
|
event.returnValue = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
document.querySelectorAll("a").forEach((link) => {
|
const anchors = document.querySelectorAll(anchorSelector);
|
||||||
link.addEventListener("click", handleClick as never);
|
anchors.forEach((link) => {
|
||||||
|
link.addEventListener("click", handleClick);
|
||||||
});
|
});
|
||||||
window.addEventListener("popstate", handlePopState);
|
window.addEventListener("popstate", handlePopState);
|
||||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
document.querySelectorAll("a").forEach((link) => {
|
anchors.forEach((link) => {
|
||||||
link.removeEventListener("click", handleClick as never);
|
link.removeEventListener("click", handleClick);
|
||||||
window.removeEventListener("popstate", handlePopState);
|
|
||||||
});
|
});
|
||||||
|
window.removeEventListener("popstate", handlePopState);
|
||||||
window.removeEventListener("beforeunload", handleBeforeUnload);
|
window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||||
};
|
};
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
|||||||
Reference in New Issue
Block a user