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 1/3] 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}
         />
     );
 }

From 9be2bcefbed36505dd74a3418fa4cdf253f450de Mon Sep 17 00:00:00 2001
From: jamal-khey <myjamal89@gmail.com>
Date: Mon, 30 Dec 2024 17:28:10 +0100
Subject: [PATCH 2/3] simplify code

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

diff --git a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
index 62801f9d..32c3e580 100644
--- a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
+++ b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
@@ -5,17 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Autocomplete, AutocompleteProps, AutocompleteRenderInputParams, createFilterOptions } from '@mui/material';
-import { HTMLAttributes, ReactNode, useMemo } from 'react';
+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;
@@ -61,7 +53,11 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
     } = props;
 
     const intl = useIntl();
-    const filterOptions = useMemo(() => createGenericFilterOptions<T>(), []);
+    const filterOptions = useMemo(() => createFilterOptions<T>({
+        matchFrom: 'any',
+        trim: true,
+        ignoreCase: true,
+    }), []);
     const displayedValue = useMemo(() => {
         if (searchTermDisabled || searchTermDisableReason) {
             return (

From 49258d6e813ca836b260a79fc5e8bd43b8b221df Mon Sep 17 00:00:00 2001
From: jamal-khey <myjamal89@gmail.com>
Date: Mon, 30 Dec 2024 17:31:12 +0100
Subject: [PATCH 3/3] format code

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

diff --git a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
index 32c3e580..c3880675 100644
--- a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
+++ b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Autocomplete, AutocompleteProps, AutocompleteRenderInputParams, createFilterOptions } from '@mui/material';
-import { HTMLAttributes, ReactNode, useMemo } from "react";
+import { HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
@@ -53,11 +53,15 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
     } = props;
 
     const intl = useIntl();
-    const filterOptions = useMemo(() => createFilterOptions<T>({
-        matchFrom: 'any',
-        trim: true,
-        ignoreCase: true,
-    }), []);
+    const filterOptions = useMemo(
+        () =>
+            createFilterOptions<T>({
+                matchFrom: 'any',
+                trim: true,
+                ignoreCase: true,
+            }),
+        []
+    );
     const displayedValue = useMemo(() => {
         if (searchTermDisabled || searchTermDisableReason) {
             return (