From 8983efe52aec11455789c8a4a75e23ed67c75bd6 Mon Sep 17 00:00:00 2001
From: dylanplural <dylan@plural.ai>
Date: Wed, 6 Oct 2021 18:53:58 +0100
Subject: [PATCH 1/2] Update multiselect.component.tsx

It's required in our product to provide our own filter method (using a fuzzy match) or disable filtering completely in certain cases which are both currently unsupported.

Not 100% sure the provided PR will work, but if not, something similar would be greatly appreciated.
---
 src/multiselect/multiselect.component.tsx | 26 +++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/multiselect/multiselect.component.tsx b/src/multiselect/multiselect.component.tsx
index 3755a8f..6912cdb 100644
--- a/src/multiselect/multiselect.component.tsx
+++ b/src/multiselect/multiselect.component.tsx
@@ -16,11 +16,12 @@ const closeIconTypes = {
 };
 
 export class Multiselect extends React.Component<IMultiselectProps, any> {
-  static defaultProps: { options: never[]; disablePreSelectedValues: boolean; selectedValues: never[]; isObject: boolean; displayValue: string; showCheckbox: boolean; selectionLimit: number; placeholder: string; groupBy: string; style: {}; emptyRecordMsg: string; onSelect: () => void; onRemove: () => void; closeIcon: string; singleSelect: boolean; caseSensitiveSearch: boolean; id: string; closeOnSelect: boolean; avoidHighlightFirstOption: boolean; hidePlaceholder: boolean; showArrow: boolean; keepSearchTerm: boolean; };
+  static defaultProps: { disableFilter: boolean; customFilter: (v: any, search: string, index: number, arr: Array<any>) => boolean; options: never[]; disablePreSelectedValues: boolean; selectedValues: never[]; isObject: boolean; displayValue: string; showCheckbox: boolean; selectionLimit: number; placeholder: string; groupBy: string; style: {}; emptyRecordMsg: string; onSelect: () => void; onRemove: () => void; closeIcon: string; singleSelect: boolean; caseSensitiveSearch: boolean; id: string; closeOnSelect: boolean; avoidHighlightFirstOption: boolean; hidePlaceholder: boolean; showArrow: boolean; keepSearchTerm: boolean; };
   constructor(props) {
     super(props);
     this.state = {
       inputValue: "",
+      disableFilter: props.disableFilter,
       options: props.options,
       filteredOptions: props.options,
       unfilteredOptions: props.options,
@@ -61,6 +62,7 @@ export class Multiselect extends React.Component<IMultiselectProps, any> {
     this.getSelectedItemsCount = this.getSelectedItemsCount.bind(this);
     this.hideOnClickOutside = this.hideOnClickOutside.bind(this);
     this.isVisible = this.isVisible.bind(this);
+    this.customFilter = props.customFilter.bind(this);
   }
 
   initialSetValue() {
@@ -194,13 +196,25 @@ export class Multiselect extends React.Component<IMultiselectProps, any> {
   }
 
   filterOptionsByInput() {
-    let { options, filteredOptions, inputValue } = this.state;
-    const { isObject, displayValue } = this.props;
-    if (isObject) {
-      options = filteredOptions.filter(i => this.matchValues(i[displayValue], inputValue))
+    let { options, filteredOptions, inputValue, disableFilter, customFilter } = this.state;
+
+    if (disableFilter) {
+      this.groupByOptions(options);
+      this.setState({ options });
+      return
+    }
+    
+    if (customFilter) {
+      options = filteredOptions.filter((v, i, arr) => customFilter(v, inputValue, i, arr))
     } else {
-      options = filteredOptions.filter(i => this.matchValues(i, inputValue));
+      const { isObject, displayValue } = this.props;
+      if (isObject) {
+        options = filteredOptions.filter(i => this.matchValues(i[displayValue], inputValue))
+      } else {
+        options = filteredOptions.filter(i => this.matchValues(i, inputValue));
+      }
     }
+
     this.groupByOptions(options);
     this.setState({ options });
   }

From c15d35ab77c9ecbf2aba0748568e3996beba6806 Mon Sep 17 00:00:00 2001
From: dylanplural <dylan@plural.ai>
Date: Wed, 6 Oct 2021 19:00:03 +0100
Subject: [PATCH 2/2] Allow customFilter to be undefined

---
 src/multiselect/multiselect.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/multiselect/multiselect.component.tsx b/src/multiselect/multiselect.component.tsx
index 6912cdb..ecd0f06 100644
--- a/src/multiselect/multiselect.component.tsx
+++ b/src/multiselect/multiselect.component.tsx
@@ -62,7 +62,7 @@ export class Multiselect extends React.Component<IMultiselectProps, any> {
     this.getSelectedItemsCount = this.getSelectedItemsCount.bind(this);
     this.hideOnClickOutside = this.hideOnClickOutside.bind(this);
     this.isVisible = this.isVisible.bind(this);
-    this.customFilter = props.customFilter.bind(this);
+    this.customFilter = props?.customFilter?.bind(this);
   }
 
   initialSetValue() {