From ce732778bb34d1873363a6822936116f8fc37ef4 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 24 Nov 2022 23:21:47 -0600
Subject: [PATCH] add .value div for consistency and styling

---
 client/components/combobox.jsx                |  1 +
 client/components/combobox.less               |  1 -
 .../editor/metadataEditor/metadataEditor.jsx  | 24 ++++++++++++-------
 .../editor/metadataEditor/metadataEditor.less |  4 ++++
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/components/combobox.jsx b/client/components/combobox.jsx
index 0f5e4c095..65c285291 100644
--- a/client/components/combobox.jsx
+++ b/client/components/combobox.jsx
@@ -8,6 +8,7 @@ const Combobox = createClass({
 	displayName     : 'Combobox',
 	getDefaultProps : function() {
 		return {
+			className   : '',
 			trigger     : 'hover',
 			default     : '',
 			autoSuggest : {
diff --git a/client/components/combobox.less b/client/components/combobox.less
index 42011fc3b..0cf81d383 100644
--- a/client/components/combobox.less
+++ b/client/components/combobox.less
@@ -1,6 +1,5 @@
 .dropdown-container {
     position:relative;
-    flex: 1;
     input {
         width: 100%;
     }
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index fdf092b2b..fea7f5e68 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -224,7 +224,7 @@ const MetadataEditor = createClass({
 		const listLanguages = ()=>{
 			return _.map(langCodes.sort(), (code, index)=>{
 				const languageNames = new Intl.DisplayNames([code], { type: 'language' });
-				return <div className='item' title={''} key={`${index}`} data-value={`${code}`}>
+				return <div className='item' title={''} key={`${index}`} data-value={`${code}`} data-detail={`${languageNames.of(code)}`}>
 					{`${code}`}
 					<div className='detail'>{`${languageNames.of(code)}`}</div>
 				</div>;
@@ -234,13 +234,21 @@ const MetadataEditor = createClass({
 
 		return <div className='field language'>
 			<label>language</label>
-			<Combobox trigger='click'
-				default={this.props.metadata.lang || ''}
-				onSelect={(value)=>this.handleLanguage(value)}
-				onEntry={(e)=>{this.handleFieldChange('lang', e);}}
-				options={listLanguages()}
-				autoSuggest={{ suggestMethod: 'includes', clearAutoSuggestOnClick: true }}>
-			</Combobox>
+			<div className='value'>
+				<Combobox trigger='click'
+					className='language-dropdown'
+					default={this.props.metadata.lang || ''}
+					onSelect={(value)=>this.handleLanguage(value)}
+					onEntry={(e)=>{this.handleFieldChange('lang', e);}}
+					options={listLanguages()}
+					autoSuggest={{
+						suggestMethod           : 'includes',
+						clearAutoSuggestOnClick : true,
+						filterOn                : 'data-value'
+					}}>
+				</Combobox>
+			</div>
+
 		</div>;
 	},
 
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index a8c54a13d..2253d933a 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -85,6 +85,10 @@
 				font-size   : 0.8em;
 			}
 		}
+
+		&.language .language-dropdown {
+			max-width:150px;
+		}
 	}