From fc7c46cfec45cedc263a05666891bf9f037eb526 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 28 Nov 2022 21:39:41 -0600
Subject: [PATCH] add ability to filter options on any number of attributes

---
 client/components/combobox.jsx                | 25 ++++++++++---------
 .../editor/metadataEditor/metadataEditor.jsx  |  4 +--
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/components/combobox.jsx b/client/components/combobox.jsx
index b7908d9ea..8c9833470 100644
--- a/client/components/combobox.jsx
+++ b/client/components/combobox.jsx
@@ -2,6 +2,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
+const { filter } = require('lodash');
 require('./combobox.less');
 
 const Combobox = createClass({
@@ -15,7 +16,7 @@ const Combobox = createClass({
 			autoSuggest : {
 				clearAutoSuggestOnClick : true,
 				suggestMethod           : 'includes',
-				filterOn                : 'data-value'  // should allow as array to filter on multiple attributes, or even custom filter
+				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
 			},
 		};
 	},
@@ -81,23 +82,23 @@ const Combobox = createClass({
 	},
 	renderDropdown : function(dropdownChildren){
 		if(!this.state.showDropdown) return null;
-
 		if(this.props.autoSuggest && !this.state.inputFocused){
 			const suggestMethod = this.props.autoSuggest.suggestMethod;
 			const filterOn = this.props.autoSuggest.filterOn;
-			dropdownChildren = dropdownChildren.map((item)=>({
-				...item,
-				value : item.props[filterOn]
-			}));
-			if(suggestMethod === 'includes'){
-				dropdownChildren = dropdownChildren.filter((item)=>item.value.includes(this.state.value));
-			} else if(suggestMethod === 'sequential'){
-				dropdownChildren = dropdownChildren.filter((item)=>item.value.startsWith(this.state.value));
-			}
 
+			const filteredArrays = filterOn.map((attr)=>{
+				const children = dropdownChildren.filter((item)=>{
+					if(suggestMethod === 'includes'){
+						return item.props[attr].toLowerCase().includes(this.state.value.toLowerCase());
+					} else if(suggestMethod === 'startsWith'){
+						return item.props[attr].toLowerCase().startsWith(this.state.value.toLowerCase());
+					}
+				});
+				return children;
+			});
+			dropdownChildren = _.uniq(filteredArrays.flat(1));
 		}
 
-
 		return (
 			<div className='dropdown-options'>
 				{dropdownChildren}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 915dc3686..6242a1409 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -244,9 +244,9 @@ const MetadataEditor = createClass({
 					onEntry={(e)=>{this.handleFieldChange('lang', e);}}
 					options={listLanguages()}
 					autoSuggest={{
-						suggestMethod           : 'includes',
+						suggestMethod           : 'startsWith',
 						clearAutoSuggestOnClick : true,
-						filterOn                : 'data-value'
+						filterOn                : ['data-value', 'data-detail', 'title']
 					}}>
 				</Combobox>
 			</div>