Dispatch dropdown change on value change for any reason (#4128)

* changes

* changes

* changes

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -21,6 +21,7 @@ No changes to highlight.
 ## New Features:
 
 - Adds a `root_path` parameter to `launch()` that allows running Gradio applications on subpaths (e.g. www.example.com/app) behind a proxy, by [@abidlabs](https://github.com/abidlabs) in [PR 4133](https://github.com/gradio-app/gradio/pull/4133)
+- Fix dropdown change listener to trigger on change when updated as an output by [@aliabid94](https://github.com/aliabid94) in [PR 4128](https://github.com/gradio-app/gradio/pull/4128). 
 
 ## Bug Fixes:
 

js/form/src/Dropdown.svelte

@@ -7,6 +7,7 @@
 	export let label: string;
 	export let info: string | undefined = undefined;
 	export let value: string | Array<string> | undefined;
+	let old_value = Array.isArray(value) ? value.slice() : value;
 	export let multiselect: boolean = false;
 	export let max_choices: number;
 	export let choices: Array<string>;
@@ -46,7 +47,6 @@
 				value: option,
 				selected: true
 			});
-			dispatch("change", value);
 		}
 		value = value;
 	}
@@ -59,14 +59,12 @@
 			value: option,
 			selected: false
 		});
-		dispatch("change", value);
 	}
 
 	function remove_all(e: any) {
 		value = [];
 		inputValue = "";
 		e.preventDefault();
-		dispatch("change", value);
 	}
 
 	function handleOptionMousedown(e: any) {
@@ -92,7 +90,6 @@
 					value: option,
 					selected: true
 				});
-				dispatch("change", value);
 				return;
 			}
 		}
@@ -108,7 +105,6 @@
 						value: value,
 						selected: true
 					});
-					dispatch("change", value);
 				}
 				inputValue = activeOption;
 				showOptions = false;
@@ -148,6 +144,13 @@
 			}
 		}
 	}
+
+	$: {
+		if (JSON.stringify(value) != JSON.stringify(old_value)) {
+			dispatch("change", value);
+			old_value = Array.isArray(value) ? value.slice() : value;
+		}
+	}
 </script>
 
 <label>
@@ -190,14 +193,12 @@
 					on:keyup={() => {
 						if (allow_custom_value) {
 							value = inputValue;
-							dispatch("change", value);
 						}
 					}}
 					on:blur={() => {
 						if (multiselect) {
 							inputValue = "";
 						} else if (!allow_custom_value) {
-							let old_value = value;
 							if (value !== inputValue) {
 								if (typeof value === "string" && inputValue == "") {
 									inputValue = value;
@@ -206,9 +207,6 @@
 									inputValue = "";
 								}
 							}
-							if (old_value !== value) {
-								dispatch("change", value);
-							}
 						}
 						showOptions = false;
 					}}
@@ -294,11 +292,6 @@
 		height: 18px;
 	}
 
-	.single-select {
-		margin: var(--spacing-sm);
-		color: var(--body-text-color);
-	}
-
 	.secondary-wrap {
 		display: flex;
 		flex: 1 1 0%;