From ed5d96a74b5afa496cc77c04130e89f9b2e04af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Tue, 9 Jun 2026 22:23:56 +0200
Subject: [PATCH] fix: add-filter button uses ref + state for positioning

Store button position in state on click, then pass to the portal
popover via style. Eliminates getElementById race condition where
the portal hadn't rendered yet when trying to set DOM styles.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/app/page.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index c578dfd..0c208ce 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
@@ -237,9 +237,11 @@ function TicketWorkbenchContent() {
   const [saveViewOpen, setSaveViewOpen] = useState(false);
   const [saveViewName, setSaveViewName] = useState("");
   const [addFilterOpen, setAddFilterOpen] = useState(false);
-  const [addFilterField, setAddFilterField] = useState<string | null>(null); // which field type is selected
+  const [addFilterField, setAddFilterField] = useState<string | null>(null);
   const [addFilterOperator, setAddFilterOperator] = useState("is");
   const [addFilterValue, setAddFilterValue] = useState("");
+  const [filterPopoverPos, setFilterPopoverPos] = useState({ left: 0, top: 0 });
+  const addFilterBtnRef = useRef<HTMLButtonElement>(null);
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newSubject, setNewSubject] = useState("");
@@ -840,13 +842,12 @@ function TicketWorkbenchContent() {
                 ))}
               <div>
                 <button
+                  ref={addFilterBtnRef}
                   type="button"
-                  onClick={(event) => {
-                    const rect = event.currentTarget.getBoundingClientRect();
-                    const popover = document.getElementById("add-filter-popover");
-                    if (popover) {
-                      popover.style.left = `${rect.left}px`;
-                      popover.style.top = `${rect.bottom + 4}px`;
+                  onClick={() => {
+                    if (addFilterBtnRef.current) {
+                      const rect = addFilterBtnRef.current.getBoundingClientRect();
+                      setFilterPopoverPos({ left: rect.left, top: rect.bottom + 4 });
                     }
                     setAddFilterOpen((prev) => !prev);
                   }}
@@ -1408,8 +1409,8 @@ function TicketWorkbenchContent() {
             }}
           />
           <div
-            id="add-filter-popover"
             className="fixed z-[9999] w-52 rounded-md border border-border bg-popover p-1 shadow-lg"
+            style={{ left: filterPopoverPos.left, top: filterPopoverPos.top }}
           >
             {!addFilterField ? (
               <>