From 7d89716519d0751072792c9bbda668ffeb597296 Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Wed, 2 Aug 2023 12:32:45 -0400
Subject: [PATCH] `gr.Dropdown` now has correct behavior in static mode as well
 as when an option is selected (#5062)

* dropdown fixes

* add changeset

* add changeset

* guide

* guide

* stories

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/eight-humans-sniff.md              |  6 +++++
 .../01_blocks-and-event-listeners.md          |  4 ++-
 js/form/src/Dropdown.stories.svelte           | 26 ++++++++++++++++++
 js/form/src/Dropdown.svelte                   | 27 ++++++++++---------
 4 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/eight-humans-sniff.md
 create mode 100644 js/form/src/Dropdown.stories.svelte

diff --git a/.changeset/eight-humans-sniff.md b/.changeset/eight-humans-sniff.md
new file mode 100644
index 0000000000000..9e001c99d701c
--- /dev/null
+++ b/.changeset/eight-humans-sniff.md
@@ -0,0 +1,6 @@
+---
+"@gradio/form": patch
+"gradio": patch
+---
+
+fix:`gr.Dropdown` now has correct behavior in static mode as well as when an option is selected
diff --git a/guides/03_building-with-blocks/01_blocks-and-event-listeners.md b/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
index 905994f71f94b..51e8c076320f5 100644
--- a/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
+++ b/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
@@ -15,12 +15,14 @@ $demo_hello_blocks
 
 ## Event Listeners and Interactivity
 
-In the example above, you'll notice that you are able to edit Textbox `name`, but not Textbox `output`. This is because any Component that acts as an input to an event listener is made interactive. However, since Textbox `output` acts only as an output, it is not interactive. You can directly configure the interactivity of a Component with the `interactive=` keyword argument. 
+In the example above, you'll notice that you are able to edit Textbox `name`, but not Textbox `output`. This is because any Component that acts as an input to an event listener is made interactive. However, since Textbox `output` acts only as an output, Gradio determines that it should not be made interactive. You can override the default behavior and directly configure the interactivity of a Component with the boolean `interactive` keyword argument. 
 
 ```python
 output = gr.Textbox(label="Output", interactive=True)
 ```
 
+_Note_: What happens if a Gradio component is neither an input nor an output? If a component is constructed with a default value, then it is presumed to be displaying content and is rendered non-interactive. Otherwise, it is rendered interactive. Again, this behavior can be overridden by specifying a value for the `interactive` argument.
+
 ## Types of Event Listeners
 
 Take a look at the demo below:
diff --git a/js/form/src/Dropdown.stories.svelte b/js/form/src/Dropdown.stories.svelte
new file mode 100644
index 0000000000000..909145f7b2c69
--- /dev/null
+++ b/js/form/src/Dropdown.stories.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Dropdown from "./Dropdown.svelte";
+</script>
+
+<Meta
+	title="Components/Dropdown"
+	component={Dropdown}
+	argTypes={{
+        multiselect: {
+            control: [true, false],
+            description: "Whether to autoplay the video on load",
+			name: "multiselect",
+			value: false
+        }
+     }}
+/>
+
+<Template let:args>
+	<Dropdown {...args} />
+</Template>
+
+<Story name="Default" args={{ value:"swim", choices:["run", "swim", "jump"], label:"Dropdown"}} />
+<Story name="Multiselect" args={{ value:["swim", "run"], choices:["run", "swim", "jump"], label:"Multiselect Dropdown", multiselect:true}} />
+<Story name="Multiselect Static" args={{ value:["swim", "run"], choices:["run", "swim", "jump"], label:"Multiselect Dropdown", multiselect:true, disabled:true}} />
+
diff --git a/js/form/src/Dropdown.svelte b/js/form/src/Dropdown.svelte
index c56a8be2ff1b1..bf7a0e42fe358 100644
--- a/js/form/src/Dropdown.svelte
+++ b/js/form/src/Dropdown.svelte
@@ -72,8 +72,11 @@
 	}
 
 	function remove(option: string): void {
-		value = value as string[];
-		value = value.filter((v: string) => v !== option);
+		if (!disabled)
+		{
+			value = value as string[];
+			value = value.filter((v: string) => v !== option);
+		}
 		dispatch("select", {
 			index: choices.indexOf(option),
 			value: option,
@@ -87,7 +90,7 @@
 		e.preventDefault();
 	}
 
-	function handle_blur(e: FocusEvent) {
+	function handle_blur(e: FocusEvent): void {
 		if (multiselect) {
 			inputValue = "";
 		} else if (!allow_custom_value) {
@@ -104,14 +107,10 @@
 		dispatch("blur");
 	}
 
-	function handle_focus(e: FocusEvent){
+	function handle_focus(e: FocusEvent): void{
 		dispatch("focus");
-		showOptions = !showOptions;
-		if (showOptions) {
-			filtered = choices;
-		} else {
-			filterInput.blur();
-		}
+		showOptions = true;
+		filtered = choices;
 	}
 
 	function handleOptionMousedown(e: any): void {
@@ -137,6 +136,7 @@
 					value: option,
 					selected: true
 				});
+				filterInput.blur();
 			}
 		}
 	}
@@ -154,6 +154,7 @@
 				}
 				inputValue = activeOption;
 				showOptions = false;
+				filterInput.blur();
 			} else if (multiselect && Array.isArray(value)) {
 				value.includes(activeOption) ? remove(activeOption) : add(activeOption);
 				inputValue = "";
@@ -209,13 +210,15 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div on:click|preventDefault={() => remove(s)} class="token">
 						<span>{s}</span>
+						{#if !disabled}
 						<div
 							class:hidden={disabled}
 							class="token-remove"
 							title="Remove {s}"
 						>
-							<Remove />
-						</div>
+						<Remove />
+					</div>
+					{/if}
 					</div>
 				{/each}
 			{/if}