mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Trigger events on programmatic change for Dropdown and Checkbox (#3045)

Browse Source 
* Trigger events on change

* CHANGELOG

* Remove logging
This commit is contained in:
Freddy Boulton 2023-01-23 19:41:33 +01:00 committed by GitHub
parent 35d4243854
commit acbc695ce1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

12
ui/packages/form/src/Checkbox.svelte
View File

@ -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"

11
ui/packages/form/src/Dropdown.svelte
View File

@ -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,14 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let show_label: boolean;
const dispatch = createEventDispatcher<{
change: string | Array<string>;
}>();
$: if (!multiselect) {
dispatch("change", value);
}
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
@ -19,7 +28,7 @@
</select> -->
{#if !multiselect}
<select bind:value on:change {disabled}>
<select bind:value {disabled}>
{#each choices as choice}
<option>{choice}</option>
{/each}