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() { + return createFilterOptions({ + matchFrom: 'any', + trim: true, + ignoreCase: true, + }); +} + export type RenderElementProps = HTMLAttributes & { element: T; inputValue: string; @@ -53,7 +61,7 @@ export function ElementSearchInput(props: Readonly } = props; const intl = useIntl(); - + const filterOptions = useMemo(() => createGenericFilterOptions(), []); const displayedValue = useMemo(() => { if (searchTermDisabled || searchTermDisableReason) { return ( @@ -120,6 +128,7 @@ export function ElementSearchInput(props: Readonly }} disabled={searchTermDisabled} PaperComponent={PaperComponent} + filterOptions={filterOptions} /> ); }