fix: allows long argument

Author: TheauW

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

@@ -104,6 +104,8 @@ export function SearchBar<T extends string>({
     SearchBarTokenEquation[]
   >([]);
 
+  const currentFilters = useRef<string | null>(null);
+
   const [suggestions, setSuggestions] = useState<SearchBarSuggestions>({
     items: [],
     nature: [],
@@ -127,7 +129,11 @@ export function SearchBar<T extends string>({
 
   // Effect to initialize the token equations from filters
   useEffect(() => {
-    if (tokenEquations.length !== 0) return; // Avoid reloading if already loaded
+    const newFiltersString = String(
+      filters.map((filter) => JSON.stringify(filter)),
+    );
+
+    if (currentFilters && currentFilters.current === newFiltersString) return; // Avoid reloading if already loaded
 
     async function load() {
       const promises = filters.map(async (filter, filterIndex) =>
@@ -137,14 +143,15 @@ export function SearchBar<T extends string>({
       setTokenEquations(newTokenEquations);
     }
 
-    if (filters.length !== 0 && tokenEquations.length === 0) load();
-  }, []);
+    if (filters.length !== 0) load();
+    currentFilters.current = newFiltersString;
+  }, [filters, createSuggestions, currentFilters, tokenEquations.length]);
 
   const usesCurrentInput = useMemo(
     () => functionUsesCurrentInput(createSuggestions),
     [createSuggestions],
   );
-  // Create a list of options based on the current tokens and data
+
   useEffect(() => {
     async function load() {
       const params: CreateSuggestionsParams = {
@@ -324,15 +331,17 @@ export function SearchBar<T extends string>({
         display: "flex",
         border: "1px solid",
         borderColor: "grey.400",
-        overflow: "auto",
+        overflow: "hidden",
         borderRadius: 1,
         ":focus-within": {
           borderColor: "primary.main",
         },
       }}
       data-testid="search-bar"
     >
-      <Box sx={{ gap: 1, display: "flex", padding: 1, width: 0.9 }}>
+      <Box
+        sx={{ gap: 1, display: "flex", padding: 1, width: 1, overflow: "auto" }}
+      >
         {tokenEquations.map((equation, index) => (
           <DisplayTokenEquation
             key={index}

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

@@ -249,9 +249,6 @@ export default function SearchField({
     }, 0);
   }
 
-  // Calculate the width of the input field based on the input value length
-  const width = Math.min(Math.max(inputValue.length * 8 + 50, 150), 800);
-
   const handleDateAccepted = (newValue: string | null) => {
     if (newValue) {
       handleTokenCreation(
@@ -289,8 +286,7 @@ export default function SearchField({
       sx={{
         marginTop: "2px",
         minWidth: "180px",
-        width: "auto",
-        maxWidth: 0.9,
+        flexGrow: 1,
       }}
       disableClearable={true}
       options={suggestions.items}
@@ -309,9 +305,6 @@ export default function SearchField({
             input: {
               ...params.InputProps,
               disableUnderline: true,
-              style: {
-                width: `${width}px`,
-              },
             },
           }}
           onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {