From 2fa67fa68cdae01ab00ea6de224d0dab699baa9e Mon Sep 17 00:00:00 2001
From: jamal-khey <myjamal89@gmail.com>
Date: Tue, 24 Dec 2024 12:34:08 +0100
Subject: [PATCH] Enhance ElementSearchInput component with improved filtering
 and search term handling

Signed-off-by: jamal-khey <myjamal89@gmail.com>
---
 .../elementSearchInput/ElementSearchInput.tsx       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
index d547d69c..62801f9d 100644
--- a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
+++ b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
@@ -4,10 +4,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Autocomplete, AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material';
+import { Autocomplete, AutocompleteProps, AutocompleteRenderInputParams, createFilterOptions } from '@mui/material';
 import { HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
+function createGenericFilterOptions<T>() {
+    return createFilterOptions<T>({
+        matchFrom: 'any',
+        trim: true,
+        ignoreCase: true,
+    });
+}
+
 export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
     element: T;
     inputValue: string;
@@ -53,7 +61,7 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
     } = props;
 
     const intl = useIntl();
-
+    const filterOptions = useMemo(() => createGenericFilterOptions<T>(), []);
     const displayedValue = useMemo(() => {
         if (searchTermDisabled || searchTermDisableReason) {
             return (
@@ -120,6 +128,7 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
             }}
             disabled={searchTermDisabled}
             PaperComponent={PaperComponent}
+            filterOptions={filterOptions}
         />
     );
 }