Fixed page highlighting in multiple kpis details page.

project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx

@@ -68,6 +68,7 @@ function ExtractedResultsPage() {
 	const [customValue, setCustomValue] = useState("");
 	const [customPage, setCustomPage] = useState("");
 	const [editingCustomPage, setEditingCustomPage] = useState(false);
+	const [focusHighlightOverride, setFocusHighlightOverride] = useState<{ page: number; text: string } | null>(null);
 
 	const originalValue = kpiValues[0]?.entity || "";
 	const originalPage = kpiValues[0]?.page || 0;
@@ -102,6 +103,11 @@ function ExtractedResultsPage() {
 	// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
 	const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue;
 
+	const focusHighlight = focusHighlightOverride || {
+		page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
+		text: groupedKpiValues.at(selectedIndex)?.entity || "",
+	};
+
 	useEffect(() => {
 		const valueChanged = selectedValue !== originalValue;
 		const pageChanged = selectedPage !== originalPage;
@@ -159,12 +165,14 @@ function ExtractedResultsPage() {
 		const value = event.target.value;
 		if (value === "custom") {
 			setSelectedIndex(-1);
+			setFocusHighlightOverride(null);
 		} else {
 			const index = Number.parseInt(value);
 			setSelectedIndex(index);
 			setCurrentPage(groupedKpiValues[index].pages[0]);
 			setCustomValue("");
 			setCustomPage("");
+			setFocusHighlightOverride(null);
 		}
 	};
 
@@ -174,7 +182,7 @@ function ExtractedResultsPage() {
 		const value = event.target.value;
 		setCustomValue(value);
 		setSelectedIndex(-1);
-	};
+		setFocusHighlightOverride(null);
 
 	const handleCustomPageChange = (
 		event: React.ChangeEvent<HTMLInputElement>,
@@ -191,6 +199,15 @@ function ExtractedResultsPage() {
 		setSelectedIndex(index);
 		setCustomValue("");
 		setCustomPage("");
+		setFocusHighlightOverride(null);
+	};
+
+	const handlePageClick = (page: number, entity: string) => {
+		setCurrentPage(page);
+		setFocusHighlightOverride({
+			page: page,
+			text: entity,
+		});
 	};
 
 	const handleBackClick = () => {
@@ -325,7 +342,7 @@ function ExtractedResultsPage() {
 													component="button"
 													onClick={(e: React.MouseEvent) => {
 														e.stopPropagation();
-														setCurrentPage(page);
+														handlePageClick(page, item.entity);
 													}}
 													sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }}
 												>
@@ -351,6 +368,7 @@ function ExtractedResultsPage() {
 											}}
 											onClick={() => {
 												setSelectedIndex(-1);
+												setFocusHighlightOverride(null);
 											}}
 										>
 											<Radio
@@ -479,10 +497,7 @@ function ExtractedResultsPage() {
 							highlight={groupedKpiValues
 								.map((k) => k.pages.map((page: number) => ({ page, text: k.entity })))
 								.reduce((acc, val) => acc.concat(val), [])}
-							focusHighlight={{
-								page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
-								text: groupedKpiValues.at(selectedIndex)?.entity || "",
-							}}
+							focusHighlight={focusHighlight}
 						/>
 					</Paper>
 					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>