STCOM-1010: MultiSelection - exception when using special characters …

…in search string (#1821)

* STSCOM-1010 Fix MultiSelection search with special characters

* STCOM-1010 Added comment explaining MultiSelection filter text escaping

CHANGELOG.md

@@ -45,6 +45,7 @@
 * properly provide popper placements. Fixes STCOM-979.
 * Additional functionality needed for metadata display when user record is deleted. Refs STCOM-882.
 * Add the ability to pass a className to the rows container in the `<MultiColumnList>`. Refs STCOM-1009.
+* MultiSelection - fix exception when using special characters in search string. Fixes STCOM-1010.
 
 ## [10.1.0](https://github.com/folio-org/stripes-components/tree/v10.1.0) (2022-02-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.0.0...v10.1.0)

lib/MultiSelection/MultiSelection.js

@@ -27,7 +27,10 @@ import css from './MultiSelect.css';
 import formStyles from '../sharedStyles/form.css';
 
 const filterOptions = (filterText, list) => {
-  const filterRegExp = new RegExp(`^${filterText}`, 'i');
+  // escape special characters in filter text, so they won't be interpreted by RegExp
+  const escapedFilterText = filterText.replace(/[#-.]|[[-^]|[?|{}]/g, '\\$&');
+
+  const filterRegExp = new RegExp(`^${escapedFilterText}`, 'i');
   const renderedItems = filterText ? list.filter(item => item.label.search(filterRegExp) !== -1) : list;
   const exactMatch = filterText ? (renderedItems.filter(item => item.label === filterText).length === 1) : false;
   return { renderedItems, exactMatch };