From ee78458c6447ffbd44023ed2efc3d4037c9a1400 Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Tue, 25 Apr 2023 09:12:38 -0700
Subject: [PATCH] Fixes dropdown does not position itself at selected element
 when opened (#3639)

* fixes

* fix

* Update CHANGELOG.md
---
 CHANGELOG.md                       |  1 +
 js/form/src/DropdownOptions.svelte | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 092d7b380b..41d2605dab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ No changes to highlight.
 - Fix `gr.ChatBot` to handle image url [tye-singwa](https://github.com/tye-signwa) in [PR 3953](https://github.com/gradio-app/gradio/pull/3953)
 - Move Google Tag Manager related initialization code to analytics-enabled block by [@akx](https://github.com/akx) in [PR 3956](https://github.com/gradio-app/gradio/pull/3956)
 - Fix bug where port was not reused if the demo was closed and then re-launched by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3896](https://github.com/gradio-app/gradio/pull/3959)
+- Fixes issue where dropdown does not position itself at selected element when opened [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3639](https://github.com/gradio-app/gradio/pull/3639)
 
 ## Documentation Changes:
 
diff --git a/js/form/src/DropdownOptions.svelte b/js/form/src/DropdownOptions.svelte
index 46c1c4910f..f8e0fc04da 100644
--- a/js/form/src/DropdownOptions.svelte
+++ b/js/form/src/DropdownOptions.svelte
@@ -11,9 +11,18 @@
 	let distance_from_bottom: number;
 	let input_height: number;
 	let refElement: HTMLDivElement;
+	let listElement: HTMLUListElement;
 	let top: string | null, bottom: string | null, max_height: number;
 	$: {
 		if (showOptions && refElement) {
+			if (listElement && typeof value === "string") {
+				let el = document.querySelector(
+					`li[data-value="${value}"]`
+				) as HTMLLIElement;
+				if (el) {
+					listElement.scrollTo(0, el.offsetTop);
+				}
+			}
 			distance_from_top = refElement.getBoundingClientRect().top;
 			distance_from_bottom =
 				window.innerHeight - refElement.getBoundingClientRect().bottom;
@@ -49,6 +58,7 @@
 		style:top
 		style:bottom
 		style:max-height={`calc(${max_height}px - var(--window-padding))`}
+		bind:this={listElement}
 	>
 		{#each filtered as choice}
 			<li