dropdown (#3338)

* fix

* fixes

* format

* changelog

* Update gradio/components.py

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

* fix clear case

---------

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

CHANGELOG.md

@@ -43,6 +43,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 - Fix bug that cause UI to be vertically centered at all times by [@pngwn](https://github.com/pngwn) in [PR 3336](https://github.com/gradio-app/gradio/pull/3336)
 - Fix bug where `height` set in `Gallery.style` was not respected by the front-end by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3343](https://github.com/gradio-app/gradio/pull/3343)  
 - Ensure markdown lists are rendered correctly by [@pngwn](https://github.com/pngwn) in [PR 3341](https://github.com/gradio-app/gradio/pull/3341)
+- Ensure that the initial empty value for `gr.Dropdown(Multiselect=True)` is an empty list and the initial value for `gr.Dropdown(Multiselect=False)` is an empty string by [@pngwn](https://github.com/pngwn) in [PR 3338](https://github.com/gradio-app/gradio/pull/3338)
 
 
 ## Documentation Changes:

gradio/components.py

@@ -1259,7 +1259,8 @@ class Dropdown(Changeable, IOComponent, SimpleSerializable, FormComponent):
             value=value,
             **kwargs,
         )
-        self.cleared_value = self.value
+
+        self.cleared_value = self.value or ([] if multiselect else "")
 
     def get_config(self):
         return {

gradio/utils.py

@@ -886,11 +886,11 @@ def tex2svg(formula, *args):
     svg_start = xml_code.index("<svg ")
     svg_code = xml_code[svg_start:]
     svg_code = re.sub(r"<metadata>.*<\/metadata>", "", svg_code, flags=re.DOTALL)
-    svg_code = re.sub(r' width="[^"]+"', '', svg_code)
+    svg_code = re.sub(r' width="[^"]+"', "", svg_code)
     height_match = re.search(r'height="([\d.]+)pt"', svg_code)
     if height_match:
         height = float(height_match.group(1))
-        new_height = height / FONTSIZE   # conversion from pt to em
+        new_height = height / FONTSIZE  # conversion from pt to em
         svg_code = re.sub(r'height="[\d.]+pt"', f'height="{new_height}em"', svg_code)
     copy_code = f"<span style='font-size: 0px'>{formula}</span>"
     return f"{copy_code}{svg_code}"

ui/packages/app/src/components/Dropdown/Dropdown.svelte

@@ -9,7 +9,7 @@
 	export let info: string | undefined = undefined;
 	export let elem_id: string = "";
 	export let visible: boolean = true;
-	export let value: string | Array<string> = [];
+	export let value: string | Array<string>;
 	export let multiselect: boolean = false;
 	export let max_choices: number;
 	export let choices: Array<string>;
@@ -18,6 +18,12 @@
 	export let loading_status: LoadingStatus;
 
 	export let mode: "static" | "dynamic";
+
+	if (multiselect && !value) {
+		value = [];
+	} else if (!value) {
+		value = "";
+	}
 </script>
 
 <Block

ui/packages/form/src/Dropdown.svelte

@@ -5,7 +5,7 @@
 	import { Remove, DropdownArrow } from "@gradio/icons";
 	export let label: string;
 	export let info: string | undefined = undefined;
-	export let value: string | Array<string> | undefined = undefined;
+	export let value: string | Array<string> | undefined;
 	export let multiselect: boolean = false;
 	export let max_choices: number;
 	export let choices: Array<string>;
@@ -41,7 +41,7 @@
 
 	function add(option: string) {
 		if (Array.isArray(value)) {
-			if (value.length < max_choices) {
+			if (!max_choices || value.length < max_choices) {
 				value.push(option);
 				dispatch("change", value);
 			}
@@ -58,7 +58,12 @@
 	}
 
 	function remove_all(e: any) {
-		value = [];
+		if (multiselect) {
+			value = [];
+		} else {
+			value = "";
+		}
+
 		inputValue = "";
 		e.preventDefault();
 		dispatch("change", value);