Only give same values .selected class in gr.Dropdown (#3644)

* Only give same values .selected class in gr.Dropdown

* Update changelog

* Requested changes

* Format

* Update changelog

* isort

* Update js/form/src/DropdownOptions.svelte

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
space-nuko 2023-03-29 18:10:43 -04:00 committed by GitHub
parent 2a8c82de01
commit cbb84927a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 7 deletions

View File

@ -23,6 +23,7 @@
- Fixed bug in Serializer ValueError text by [@osanseviero](https://github.com/osanseviero) in [PR 3669](https://github.com/gradio-app/gradio/pull/3669)
- Fix default parameter argument and `gr.Progress` used in same function, by [@space-nuko](https://github.com/space-nuko) in [PR 3671](https://github.com/gradio-app/gradio/pull/3671)
- Hide `Remove All` button in `gr.Dropdown` single-select mode by [@space-nuko](https://github.com/space-nuko) in [PR 3678](https://github.com/gradio-app/gradio/pull/3678)
- Fix items in `gr.Dropdown` besides the selected item receiving a checkmark, by [@space-nuko](https://github.com/space-nuko) in [PR 3644](https://github.com/gradio-app/gradio/pull/3644)
## Documentation Changes:

View File

@ -32,6 +32,11 @@
}
const dispatch = createEventDispatcher();
function isSelected(choice: string) {
let arr = Array.isArray(value) ? value : [value];
return arr.includes(choice);
}
</script>
<div class="reference" bind:this={refElement} />
@ -49,19 +54,14 @@
<li
class="item"
role="button"
class:selected={value?.includes(choice)}
class:selected={isSelected(choice)}
class:active={activeOption === choice}
class:bg-gray-100={activeOption === choice}
class:dark:bg-gray-600={activeOption === choice}
data-value={choice}
aria-label={choice}
>
<span
class:hide={!(Array.isArray(value) ? value : [value])?.includes(
choice
)}
class="inner-item pr-1"
>
<span class:hide={!isSelected(choice)} class="inner-item pr-1">
</span>
{choice}