From bf297939dccf2efb5b0d14a6664d6e32b98fe58e Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Thu, 13 Feb 2025 15:01:35 -0500
Subject: [PATCH] Debounce validation popup

---
 client/components/combobox.jsx                      |  2 +-
 .../editor/metadataEditor/metadataEditor.jsx        | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/components/combobox.jsx b/client/components/combobox.jsx
index 3f1134bd6..ae9f1d7f8 100644
--- a/client/components/combobox.jsx
+++ b/client/components/combobox.jsx
@@ -79,7 +79,7 @@ const Combobox = createClass({
 						if(!e.target.checkValidity()){
 							this.setState({
 								value : this.props.default
-							}, ()=>this.props.onEntry(e));
+							});
 						}
 					}}
 				/>
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index d45f75932..2a65d9384 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -68,6 +68,11 @@ const MetadataEditor = createClass({
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
+		const debouncedReportValidity = _.debounce((target, errMessage) => {
+			callIfExists(target, 'setCustomValidity', errMessage);
+			callIfExists(target, 'reportValidity');
+		}, 300); // 300ms debounce delay, adjust as needed
+
 		// if no validation rules, save to props
 		if(validationErr.length === 0){
 			callIfExists(e.target, 'setCustomValidity', '');
@@ -82,8 +87,8 @@ const MetadataEditor = createClass({
 				return `- ${err}`;
 			}).join('\n');
 
-			callIfExists(e.target, 'setCustomValidity', errMessage);
-			callIfExists(e.target, 'reportValidity');
+			
+			debouncedReportValidity(e.target, errMessage);
 			return false;
 		}
 	},
@@ -276,8 +281,6 @@ const MetadataEditor = createClass({
 			});
 		};
 
-		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
-
 		return <div className='field language'>
 			<label>language</label>
 			<div className='value'>
@@ -288,7 +291,7 @@ const MetadataEditor = createClass({
 					onSelect={(value)=>this.handleLanguage(value)}
 					onEntry={(e)=>{
 						e.target.setCustomValidity('');	//Clear the validation popup while typing
-						debouncedHandleFieldChange('lang', e);
+						this.handleFieldChange('lang', e);
 					}}
 					options={listLanguages()}
 					autoSuggest={{