fix: ci

Author: TheauW

packages/diracx-web-components/src/components/shared/SearchBar/DatePicker.tsx

@@ -10,7 +10,7 @@ import "dayjs/locale/en-gb"; // Import the locale for dayjs
 import { TextField, TextFieldProps } from "@mui/material";
 
 interface CustomDateTimePickerProps
-  extends Omit<DateTimePickerProps<Dayjs>, "value" | "onChange"> {
+  extends Omit<DateTimePickerProps, "value" | "onChange"> {
   value: string | null;
   onDateAccepted: (value: string | null) => void;
   handleArrowKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;

packages/diracx-web-components/src/components/shared/SearchBar/SearchField.tsx

@@ -30,7 +30,7 @@ interface SearchFieldProps {
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
 
   /** Reference to the input element */
-  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
 
   /** The current token equations */
   tokenEquations: SearchBarTokenEquation[];
@@ -360,8 +360,7 @@ export default function SearchField({
             inputRef={(node) => {
               const r = autoInputProps.ref;
               if (typeof r === "function") r(node);
-              else if (r)
-                (r.current as React.MutableRefObject<HTMLInputElement>) = node;
+              else if (r) r.current = node;
               if (inputRef) inputRef.current = node;
             }}
             inputProps={{

packages/diracx-web-components/src/components/shared/Sunburst/Sunburst.tsx

@@ -73,7 +73,7 @@ export function Sunburst({
   const finalColorScales = colorScales || defaultColorScale;
 
   const svgRef = useRef(null);
-  const tooltipRef: React.MutableRefObject<HTMLDivElement | null> =
+  const tooltipRef: React.RefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
 
   const theme = useTheme();

packages/diracx-web-components/test/SearchBar.test.tsx

@@ -72,13 +72,23 @@ describe("SearchBar", () => {
 
     const searchInput = screen.getByPlaceholderText("Enter a category");
 
-    // Create a category token
+    // Create a category token (Status)
     await user.type(searchInput, "Status");
     await user.keyboard("{Enter}");
 
-    // Check if operator suggestions appear
+    // Focus operator input
     const operatorInput = screen.getByPlaceholderText("Enter an operator");
-    await user.type(operatorInput, "{downArrow}");
+    await user.click(operatorInput);
+
+    // Open the autocomplete popup
+    await user.keyboard("{ArrowDown}");
+
+    // Wait for the listbox to appear (ensures popup is open)
+    await waitFor(() => {
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+
+    // Now expect "=" operator to be one of the suggestions
     await waitFor(() => {
       expect(screen.getByText("=")).toBeInTheDocument();
     });