ignore white spaces in search term (#658)

* Enhance ElementSearchInput component with improved filtering of spaces in both ends of the search term --------- Signed-off-by: jamal-khey <[email protected]>
gridsuite · Dec 31, 2024 · cfaadcb · cfaadcb
1 parent 1bf129d
commit cfaadcb
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx b/src/components/elementSearch/elementSearchInput/ElementSearchInput.tsx
@@ -4,7 +4,7 @@
  * 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';
 
@@ -53,7 +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 displayedValue = useMemo(() => {
         if (searchTermDisabled || searchTermDisableReason) {
             return (
@@ -120,6 +128,7 @@ export function ElementSearchInput<T>(props: Readonly<ElementSearchInputProps<T>
             }}
             disabled={searchTermDisabled}
             PaperComponent={PaperComponent}
+            filterOptions={filterOptions}
         />
     );
 }