From dd97ee9940e4792484657b9a0a2acd99979a885c Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Wed, 28 Jun 2023 16:00:27 -0500
Subject: [PATCH] Dropdown cutoff fix (#4691)

* form

* changelog

* overflow y

* changes

* changes

* changes

* Update js/form/src/DropdownOptions.svelte

Co-authored-by: Aarni Koskela <akx@iki.fi>

* Update js/form/src/DropdownOptions.svelte

Co-authored-by: Aarni Koskela <akx@iki.fi>

* changes

---------

Co-authored-by: Ali Abid <aabid94@gmail.com>
Co-authored-by: Aarni Koskela <akx@iki.fi>
---
 CHANGELOG.md                           |  2 +-
 js/app/src/components/Form/Form.svelte |  2 +-
 js/form/src/DropdownOptions.svelte     | 42 ++++++++++++++++++++------
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d910502797..df0a4a48ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,7 +24,7 @@
 - The `plot` parameter deprecation warnings should now only be emitted for `Image` components by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4709](https://github.com/gradio-app/gradio/pull/4709)
 - Removed uncessessary `type` deprecation warning by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4709](https://github.com/gradio-app/gradio/pull/4709)
 - Ensure Audio autoplays works when `autoplay=True` and the video source is dynamically updated [@pngwn](https://github.com/pngwn) in [PR 4705](https://github.com/gradio-app/gradio/pull/4705)
-
+- Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691).
 
 ## Other Changes:
 
diff --git a/js/app/src/components/Form/Form.svelte b/js/app/src/components/Form/Form.svelte
index d8bc276de1..23451f8d76 100644
--- a/js/app/src/components/Form/Form.svelte
+++ b/js/app/src/components/Form/Form.svelte
@@ -23,7 +23,7 @@
 		border: var(--block-border-width) solid var(--border-color-primary);
 		border-radius: var(--block-radius);
 		background: var(--border-color-primary);
-		overflow: hidden;
+		overflow-y: hidden;
 	}
 
 	div :global(.block) {
diff --git a/js/form/src/DropdownOptions.svelte b/js/form/src/DropdownOptions.svelte
index 0f7ff79739..32ae307278 100644
--- a/js/form/src/DropdownOptions.svelte
+++ b/js/form/src/DropdownOptions.svelte
@@ -10,9 +10,32 @@
 	let distance_from_top: number;
 	let distance_from_bottom: number;
 	let input_height: number;
+	let input_width: number;
 	let refElement: HTMLDivElement;
 	let listElement: HTMLUListElement;
 	let top: string | null, bottom: string | null, max_height: number;
+	let innerHeight: number;
+
+	const calculate_window_distance = () => {
+		const { top: ref_top, bottom: ref_bottom } =
+			refElement.getBoundingClientRect();
+		distance_from_top = ref_top;
+		distance_from_bottom = innerHeight - ref_bottom;
+	};
+
+	let scroll_timeout: NodeJS.Timeout | null = null;
+	const scroll_listener = () => {
+		if (!showOptions) return;
+		if (scroll_timeout !== null) {
+			clearTimeout(scroll_timeout);
+		}
+
+		scroll_timeout = setTimeout(() => {
+			calculate_window_distance();
+			scroll_timeout = null;
+		}, 10);
+	};
+
 	$: {
 		if (showOptions && refElement) {
 			if (listElement && typeof value === "string") {
@@ -23,18 +46,17 @@
 					listElement.scrollTo(0, el.offsetTop);
 				}
 			}
-			distance_from_top = refElement.getBoundingClientRect().top;
-			distance_from_bottom =
-				window.innerHeight - refElement.getBoundingClientRect().bottom;
-			input_height =
-				refElement.parentElement?.getBoundingClientRect().height || 0;
+			calculate_window_distance();
+			const rect = refElement.parentElement?.getBoundingClientRect();
+			input_height = rect?.height || 0;
+			input_width = rect?.width || 0;
 		}
 		if (distance_from_bottom > distance_from_top) {
-			top = `${input_height}px`;
+			top = `${distance_from_top}px`;
 			max_height = distance_from_bottom;
 			bottom = null;
 		} else {
-			bottom = `${input_height}px`;
+			bottom = `${distance_from_bottom + input_height}px`;
 			max_height = distance_from_top - input_height;
 			top = null;
 		}
@@ -44,6 +66,8 @@
 	$: _value = Array.isArray(value) ? value : [value];
 </script>
 
+<svelte:window on:scroll={scroll_listener} bind:innerHeight />
+
 <div class="reference" bind:this={refElement} />
 {#if showOptions && !disabled}
 	<ul
@@ -54,6 +78,7 @@
 		style:top
 		style:bottom
 		style:max-height={`calc(${max_height}px - var(--window-padding))`}
+		style:width={input_width + "px"}
 		bind:this={listElement}
 	>
 		{#each filtered as choice}
@@ -79,13 +104,12 @@
 <style>
 	.options {
 		--window-padding: var(--size-8);
-		position: absolute;
+		position: fixed;
 		z-index: var(--layer-top);
 		margin-left: 0;
 		box-shadow: var(--shadow-drop-lg);
 		border-radius: var(--container-radius);
 		background: var(--background-fill-primary);
-		width: var(--size-full);
 		min-width: fit-content;
 		max-width: inherit;
 		overflow: auto;