Repository: gradio-app/gradio
Pull request: Trigger events on programmatic change for Dropdown and Checkbox
# Description

Fixes #2995

How to test, run the repro from the issue

![checkbox_change_repro](https://user-images.githubusercontent.com/41651716/214109329-a2ad3120-fa61-4d8d-a5aa-644602e36d95.gif)


# Checklist:

- [x] I have performed a self-review of my own code
- [x] I have added a short summary of my change to the CHANGELOG.md
- [x] My code follows the style guidelines of this project
- [ ] I have commented my code in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my feature works
- [x] New and existing unit tests pass locally with my changes


# A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by `[@myusername](link-to-your-github-profile)` in `[PR 11111](https://github.com/gradio-app/gradio/pull/11111)`".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the 
GitHub web UI since that lets you upload files directly via drag-and-drop.

Problem statement:
`gr.Checkbox` does not trigger `.change()` from being changed by another event handler
### Describe the bug

`gr.Slider()` amongst others trigger their `.change()` event handlers if another event changes their own values. However this does not apply to `gr.Checkbox()` for some reason

And after updating from 3.12.0 to 3.16.2 I'm finding that the same now happens to `gr.Dropdown()`

Part of my app depends on this feature so I'm not sure what to do otherwise

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Reproduction

```python3
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            checkbox = gr.Checkbox(value=False)
            slider = gr.Slider(value=0, minimum=0, maximum=100)
            dropdown = gr.Dropdown(["a", "b", "c"], value="a")

    checkbox.change(lambda i: print(f"checkbox changed {i}"), inputs=[checkbox], outputs=[])
    slider.change(lambda i: print(f"slider changed {i}"), inputs=[slider])
    dropdown.change(lambda i: print(f"dropdown changed {i}"), inputs=[dropdown], outputs=[])

    changeall = gr.Button(value="Change All", variant="primary")
    changeall.click(lambda: [True, 42, "c"], inputs=[], outputs=[checkbox, slider, dropdown])

if __name__ == "__main__":
    demo.queue().launch(server_port=8081)
```

### Screenshot

_No response_

### Logs

```shell
slider changed 42
```


### System Info

```shell
3.16.2, Windows, Chrome
```


### Severity

blocking all usage of gradio

Hints from issue discussion:

Commit message: CHANGELOG

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d459481f70..89056b21fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@ By [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3014](https://github.
 * Added better support for symlinks in the way absolute paths are resolved by [@abidlabs](https://github.com/abidlabs) in [PR 3037](https://github.com/gradio-app/gradio/pull/3037)
 * Fix several minor frontend bugs (loading animation, examples as gallery) frontend [@aliabid94](https://github.com/3026) in [PR 2961](https://github.com/gradio-app/gradio/pull/3026).
 * Fixes bug that the chatbot sample code does not work with certain input value by [@petrov826](https://github.com/petrov826) in [PR 3039](https://github.com/gradio-app/gradio/pull/3039).
+* Fixed bug where the Checkbox and Dropdown change events were not triggered in response to other component changes by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3045](https://github.com/gradio-app/gradio/pull/3045)   
 
 ## Documentation Changes:
 * SEO improvements to guides by[@aliabd](https://github.com/aliabd) in [PR 2915](https://github.com/gradio-app/gradio/pull/2915)
diff --git a/ui/packages/form/src/Checkbox.svelte b/ui/packages/form/src/Checkbox.svelte
index be43f77a3e..c46d940c0b 100644
--- a/ui/packages/form/src/Checkbox.svelte
+++ b/ui/packages/form/src/Checkbox.svelte
@@ -7,22 +7,18 @@
 
 	const dispatch = createEventDispatcher<{ change: boolean }>();
 
-	function handle_change(
-		evt: Event & {
-			currentTarget: EventTarget & HTMLInputElement;
-		}
-	) {
-		value = evt.currentTarget.checked;
+	function handle_change(value: boolean) {
 		dispatch("change", value);
 	}
+
+	$: handle_change(value);
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class:disabled>
 	<input
-		on:change={(evt) => handle_change(evt)}
+		bind:checked={value}
 		{disabled}
-		checked={value}
 		type="checkbox"
 		name="test"
 		data-testid="checkbox"
diff --git a/ui/packages/form/src/Dropdown.svelte b/ui/packages/form/src/Dropdown.svelte
index cb310a2ece..9c159658f6 100644
--- a/ui/packages/form/src/Dropdown.svelte
+++ b/ui/packages/form/src/Dropdown.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import MultiSelect from "./MultiSelect.svelte";
+	import { createEventDispatcher } from "svelte";
 	import { BlockTitle } from "@gradio/atoms";
 	export let label: string;
 	export let value: string | Array<string> | undefined = undefined;
@@ -7,6 +8,15 @@
 	export let choices: Array<string>;
 	export let disabled: boolean = false;
 	export let show_label: boolean;
+
+	const dispatch = createEventDispatcher<{
+		change: string | Array<string>;
+	}>();
+
+	$: if (!multiselect) {
+		console.log("here");
+		dispatch("change", value);
+	}
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
@@ -19,7 +29,7 @@
 	</select> -->
 
 	{#if !multiselect}
-		<select bind:value on:change {disabled}>
+		<select bind:value {disabled}>
 			{#each choices as choice}
 				<option>{choice}</option>
 			{/each}


Code review comments:
diff_hunk: @@ -1,12 +1,22 @@
 <script lang="ts">
 	import MultiSelect from "./MultiSelect.svelte";
+	import { createEventDispatcher } from "svelte";
 	import { BlockTitle } from "@gradio/atoms";
 	export let label: string;
 	export let value: string | Array<string> | undefined = undefined;
 	export let multiselect: boolean = false;
 	export let choices: Array<string>;
 	export let disabled: boolean = false;
 	export let show_label: boolean;
+
+	const dispatch = createEventDispatcher<{
+		change: string | Array<string>;
+	}>();
+
+	$: if (!multiselect) {
+		console.log("here");
path: ui/packages/form/src/Dropdown.svelte
text: @user1:
left console log by accident

@author:
Ooops thank you!