diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx index 8f6981af1fa..cc9fb05e4fb 100644 --- a/polaris-react/src/components/Picker/Picker.tsx +++ b/polaris-react/src/components/Picker/Picker.tsx @@ -18,6 +18,7 @@ import type {ListboxProps, OptionProps} from '../Listbox'; import {Listbox} from '../Listbox'; import type {IconProps} from '../Icon'; import {Icon} from '../Icon'; +import {escapeRegex} from '../../utilities/string'; import {Activator, SearchField} from './components'; import type {ActivatorProps} from './components'; @@ -44,7 +45,8 @@ export interface PickerProps extends Omit { } const FILTER_REGEX = (value: string) => new RegExp(value, 'i'); -const QUERY_REGEX = (value: string) => new RegExp(`^${value}$`, 'i'); +const QUERY_REGEX = (value: string) => + new RegExp(`^${escapeRegex(value)}$`, 'i'); export function Picker({ activator, diff --git a/polaris-react/src/utilities/string.ts b/polaris-react/src/utilities/string.ts new file mode 100644 index 00000000000..5acd4a353a2 --- /dev/null +++ b/polaris-react/src/utilities/string.ts @@ -0,0 +1,3 @@ +export function escapeRegex(str: string) { + return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +}