Fix dropdown default issue (#3996)

* change

* change

* test

* changes

---------

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

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ## Bug Fixes:
 
+- Fix dropdown default value not appearing by [@aliabid94](https://github.com/aliabid94) in [PR 3996](https://github.com/gradio-app/gradio/pull/3996).
 - Fix faded coloring of output textboxes in iOS / Safari by [@aliabid94](https://github.com/aliabid94) in [PR 3993](https://github.com/gradio-app/gradio/pull/3993)
 
 ## Documentation Changes:

gradio/components.py

@@ -1407,7 +1407,7 @@ class Dropdown(
 
     def __init__(
         self,
-        choices: str | List[str] | None = None,
+        choices: List[str] | None = None,
         *,
         value: str | List[str] | Callable | None = None,
         type: str = "value",
@@ -1441,7 +1441,7 @@ class Dropdown(
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             allow_custom_value: If True, allows user to enter a custom value that is not in the list of choices.
         """
-        self.choices = choices or []
+        self.choices = [str(choice) for choice in choices] if choices else []
         valid_types = ["value", "index"]
         if type not in valid_types:
             raise ValueError(

js/form/src/Dropdown.svelte

@@ -25,6 +25,10 @@
 		showOptions = false,
 		filterInput: HTMLElement;
 
+	if (typeof value === "string") {
+		inputValue = value;
+	}
+
 	$: filtered = choices.filter((o) =>
 		inputValue ? o.toLowerCase().includes(inputValue.toLowerCase()) : o
 	);