Fixes dropdown does not position itself at selected element when opened (#3639)

* fixes

* fix

* Update CHANGELOG.md

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:
 

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