diff --git a/src/app/Recordings/Filters/LabelFilter.tsx b/src/app/Recordings/Filters/LabelFilter.tsx index f373d3383f..69f7baeac8 100644 --- a/src/app/Recordings/Filters/LabelFilter.tsx +++ b/src/app/Recordings/Filters/LabelFilter.tsx @@ -27,6 +27,7 @@ import { TextInputGroupUtilities, } from '@patternfly/react-core'; import { TimesIcon } from '@patternfly/react-icons'; +import _ from 'lodash'; import * as React from 'react'; export interface LabelFilterProps { @@ -65,7 +66,8 @@ export const LabelFilter: React.FC = ({ recordings, filteredLa }, [recordings, filteredLabels]); const filteredLabelOptions = React.useMemo(() => { - return !filterValue ? labelOptions : labelOptions.filter((l) => l.includes(filterValue.toLowerCase())); + const reg = new RegExp(_.escapeRegExp(filterValue), 'i'); + return !filterValue ? labelOptions : labelOptions.filter((l) => reg.test(l)); }, [filterValue, labelOptions]); const selectOptions = React.useMemo(() => { @@ -98,13 +100,7 @@ export const LabelFilter: React.FC = ({ recordings, filteredLa /> {filterValue ? ( - ) : null} @@ -123,6 +119,7 @@ export const LabelFilter: React.FC = ({ recordings, filteredLa aria-label="Filter by label" onOpenChange={(isOpen) => setIsExpanded(isOpen)} onOpenChangeKeys={['Escape']} + shouldFocusFirstItemOnOpen={false} > {selectOptions} diff --git a/src/app/Recordings/Filters/NameFilter.tsx b/src/app/Recordings/Filters/NameFilter.tsx index f9060f4bd5..dc31145b2f 100644 --- a/src/app/Recordings/Filters/NameFilter.tsx +++ b/src/app/Recordings/Filters/NameFilter.tsx @@ -27,6 +27,7 @@ import { TextInputGroupUtilities, } from '@patternfly/react-core'; import { TimesIcon } from '@patternfly/react-icons'; +import _ from 'lodash'; import * as React from 'react'; export interface NameFilterProps { @@ -58,7 +59,8 @@ export const NameFilter: React.FC = ({ recordings, filteredName }, [recordings, filteredNames]); const filteredNameOptions = React.useMemo(() => { - return !filterValue ? nameOptions : nameOptions.filter((n) => n.includes(filterValue.toLowerCase())); + const reg = new RegExp(_.escapeRegExp(filterValue), 'i'); + return !filterValue ? nameOptions : nameOptions.filter((n) => reg.test(n)); }, [filterValue, nameOptions]); const selectOptions = React.useMemo(() => { @@ -89,13 +91,7 @@ export const NameFilter: React.FC = ({ recordings, filteredName /> {filterValue ? ( - ) : null} @@ -114,6 +110,7 @@ export const NameFilter: React.FC = ({ recordings, filteredName aria-label="Filter by name" onOpenChange={(isOpen) => setIsExpanded(isOpen)} onOpenChangeKeys={['Escape']} + shouldFocusFirstItemOnOpen={false} > {selectOptions}