Adds a filterable parameter to gr.Dropdown that controls whether …

…user can type to filter choices (#5508) * dropdown * changes * add changeset * refactor * cleanup * dropdown * more refactoring * fixes * simplify, docstring * restore active_index * split into two files * new files * simplify * single select dropdown working * single select dropdown almost working * dropdown * multiselect * multiselect wip * multiselect * multiselect * multiselect * interactive working * dropdown * lint * add changeset * type * typing * fix multiselect static * dropdown * stories and tests * split stories * lint * add changeset * revert * add changeset * fix x * dropdown * lint, test * backend fixes * lint * fix tests * lint * fix final test * clean * review fixes * dropdown * lint * lint * changes * typing * fixes * active index null bug * adding filterable parameter to dropdown * dropdown * lint * add changeset * add changeset * svelte * fix test * add changeset * added warning * lint * fix tests --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 13, 2023 · 05715f5 · 05715f5
1 parent 8909e42
commit 05715f5
Show file tree

Hide file tree

Showing 11 changed files with 1,545 additions and 1,418 deletions.
diff --git a/.changeset/kind-ends-thank.md b/.changeset/kind-ends-thank.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:Adds a `filterable` parameter to `gr.Dropdown` that controls whether user can type to filter choices
diff --git a/gradio/components/dropdown.py b/gradio/components/dropdown.py
@@ -48,6 +48,7 @@ def __init__(
         multiselect: bool | None = None,
         allow_custom_value: bool = False,
         max_choices: int | None = None,
+        filterable: bool = True,
         label: str | None = None,
         info: str | None = None,
         every: float | None = None,
@@ -69,6 +70,7 @@ def __init__(
             multiselect: if True, multiple choices can be selected.
             allow_custom_value: If True, allows user to enter a custom value that is not in the list of choices. Only applies if `multiselect` is False.
             max_choices: maximum number of choices that can be selected. If None, no limit is enforced.
+            filterable: If True, user will be able to type into the dropdown and filter the choices by typing. Can only be set to False if `allow_custom_value` is False.
             label: component name in interface.
             info: additional component description.
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
@@ -99,9 +101,15 @@ def __init__(
             warnings.warn(
                 "The `max_choices` parameter is ignored when `multiselect` is False."
             )
+        if not filterable and allow_custom_value:
+            filterable = True
+            warnings.warn(
+                "The `filterable` parameter cannot be set to False when `allow_custom_value` is True. Setting `filterable` to True."
+            )
         self.max_choices = max_choices
         self.allow_custom_value = allow_custom_value
         self.interpret_by_tokens = False
+        self.filterable = filterable
         self.select: EventListenerMethod
         """
         Event listener for when the user selects Dropdown option.
@@ -156,6 +164,7 @@ def get_config(self):
             "max_choices": self.max_choices,
             "allow_custom_value": self.allow_custom_value,
             "container": self.container,
+            "filterable": self.filterable,
             **IOComponent.get_config(self),
         }
 
@@ -166,6 +175,7 @@ def update(
         label: str | None = None,
         info: str | None = None,
         show_label: bool | None = None,
+        filterable: bool | None = None,
         container: bool | None = None,
         scale: int | None = None,
         min_width: int | None = None,
@@ -185,6 +195,7 @@ def update(
             "value": value,
             "interactive": interactive,
             "placeholder": placeholder,
+            "filterable": filterable,
             "__type__": "update",
         }
 

diff --git a/js/dropdown/interactive/InteractiveDropdown.svelte b/js/dropdown/interactive/InteractiveDropdown.svelte
@@ -17,6 +17,7 @@
 	export let max_choices: number | null = null;
 	export let choices: [string, string | number][];
 	export let show_label: boolean;
+	export let filterable: boolean;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -53,6 +54,7 @@
 			{show_label}
 			{allow_custom_value}
 			{container}
+			{filterable}
 			on:change={() => gradio.dispatch("change")}
 			on:input={() => gradio.dispatch("input")}
 			on:select={(e) => gradio.dispatch("select", e.detail)}
@@ -69,6 +71,7 @@
 			{show_label}
 			{allow_custom_value}
 			{container}
+			{filterable}
 			on:change={() => gradio.dispatch("change")}
 			on:input={() => gradio.dispatch("input")}
 			on:select={(e) => gradio.dispatch("select", e.detail)}

diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte
@@ -18,6 +18,7 @@
 	export let show_label: boolean;
 	export let container = true;
 	export let allow_custom_value = false;
+	export let filterable = true;
 
 	let filter_input: HTMLElement;
 
@@ -186,6 +187,7 @@
 					on:keydown={handle_key_down}
 					on:blur={handle_blur}
 					on:focus={handle_focus}
+					readonly={!filterable}
 				/>
 				{#if !disabled}
 					<DropdownArrow />
@@ -264,4 +266,8 @@
 	.subdued {
 		color: var(--body-text-color-subdued);
 	}
+
+	input[readonly] {
+		cursor: pointer;
+	}
 </style>
diff --git a/js/dropdown/shared/Multiselect.svelte b/js/dropdown/shared/Multiselect.svelte
@@ -19,6 +19,7 @@
 	export let show_label: boolean;
 	export let container = true;
 	export let allow_custom_value = false;
+	export let filterable = true;
 
 	let filter_input: HTMLElement;
 	let input_text = "";
@@ -248,6 +249,7 @@
 					on:keydown={handle_key_down}
 					on:blur={handle_blur}
 					on:focus={handle_focus}
+					readonly={!filterable}
 				/>
 				<!-- TODO: fix -->
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -380,4 +382,7 @@
 	.subdued {
 		color: var(--body-text-color-subdued);
 	}
+	input[readonly] {
+		cursor: pointer;
+	}
 </style>
diff --git a/js/dropdown/static/StaticDropdown.svelte b/js/dropdown/static/StaticDropdown.svelte
@@ -16,6 +16,7 @@
 	export let max_choices: number | null = null;
 	export let choices: [string, string | number][];
 	export let show_label: boolean;
+	export let filterable: boolean;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -51,6 +52,7 @@
 			{info}
 			{show_label}
 			{allow_custom_value}
+			{filterable}
 			{container}
 			on:change={() => gradio.dispatch("change")}
 			on:input={() => gradio.dispatch("input")}
@@ -67,6 +69,7 @@
 			{label}
 			{info}
 			{show_label}
+			{filterable}
 			{allow_custom_value}
 			{container}
 			on:change={() => gradio.dispatch("change")}

diff --git a/test/test_blocks.py b/test/test_blocks.py
@@ -1093,6 +1093,7 @@ def test_with_update(self):
             "show_copy_button": None,
             "rtl": None,
             "text_align": None,
+            "autoscroll": None,
             "__type__": "update",
         }
 
@@ -1117,6 +1118,7 @@ def test_with_update(self):
             "show_copy_button": None,
             "rtl": None,
             "text_align": None,
+            "autoscroll": None,
             "__type__": "update",
         }
 

diff --git a/test/test_components.py b/test/test_components.py
@@ -106,7 +106,7 @@ def test_component_functions(self):
             "rtl": False,
             "text_align": None,
             "autofocus": False,
-            'autoscroll': True,
+            "autoscroll": True,
         }
 
     @pytest.mark.asyncio
@@ -636,6 +636,7 @@ def test_component_functions(self):
             "interactive": None,
             "root_url": None,
             "multiselect": True,
+            "filterable": True,
             "max_choices": 2,
         }
         with pytest.raises(ValueError):