Dropdown issues (#3549)

* changes

* changes

* changes

* changes

* changes

* changes

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -27,7 +27,7 @@ No changes to highlight.
 
 ## Full Changelog:
 
-No changes to highlight.
+- Fix rendering of dropdowns to take more space, and related bugs, by [@aliabid94](https://github.com/aliabid94) in [PR 3549](https://github.com/gradio-app/gradio/pull/3549)
 
 ## Contributors Shoutout:
 

ui/packages/form/src/Dropdown.svelte

@@ -32,7 +32,7 @@
 		activeOption = filtered[0];
 
 	$: readonly =
-		(!multiselect && typeof value === "string") ||
+		(!multiselect && typeof value === "string" && value.length > 0) ||
 		(multiselect && Array.isArray(value) && value.length === max_choices);
 
 	// The initial value of value is [] so that can
@@ -52,7 +52,6 @@
 				});
 				dispatch("change", value);
 			}
-			showOptions = !(value.length === max_choices);
 		}
 		value = value;
 	}
@@ -161,11 +160,12 @@
 					{readonly}
 					autocomplete="off"
 					bind:value={inputValue}
-					on:focus={() =>
-						(showOptions =
-							Array.isArray(value) && value.length === max_choices
-								? false
-								: true)}
+					on:mousedown={() => {
+						showOptions = !showOptions;
+					}}
+					on:focus={() => {
+						showOptions = true;
+					}}
 					on:blur={() => (showOptions = false)}
 					on:keyup={handleKeyup}
 				/>

ui/packages/form/src/DropdownOptions.svelte

@@ -7,15 +7,43 @@
 	export let activeOption: string;
 	export let disabled: boolean = false;
 
+	let distance_from_top: number;
+	let distance_from_bottom: number;
+	let input_height: number;
+	let refElement: HTMLDivElement;
+	let top: string | null, bottom: string | null, max_height: number;
+	$: {
+		if (showOptions && refElement) {
+			distance_from_top = refElement.getBoundingClientRect().top;
+			distance_from_bottom =
+				window.innerHeight - refElement.getBoundingClientRect().bottom;
+			input_height =
+				refElement.parentElement?.getBoundingClientRect().height || 0;
+		}
+		if (distance_from_bottom > distance_from_top) {
+			top = `${input_height}px`;
+			max_height = distance_from_bottom;
+			bottom = null;
+		} else {
+			bottom = `${input_height}px`;
+			max_height = distance_from_top - input_height;
+			top = null;
+		}
+	}
+
 	const dispatch = createEventDispatcher();
 </script>
 
+<div class="reference" bind:this={refElement} />
 {#if showOptions && !disabled}
 	<ul
 		class="options"
 		aria-expanded={showOptions}
 		transition:fly={{ duration: 200, y: 5 }}
 		on:mousedown|preventDefault={(e) => dispatch("change", e)}
+		style:top
+		style:bottom
+		style:max-height={`calc(${max_height}px - var(--window-padding))`}
 	>
 		{#each filtered as choice}
 			<li
@@ -44,6 +72,7 @@
 
 <style>
 	.options {
+		--window-padding: var(--size-8);
 		position: absolute;
 		z-index: var(--layer-5);
 		margin-left: 0;
@@ -51,7 +80,6 @@
 		border-radius: var(--container-radius);
 		background: var(--background-fill-primary);
 		width: var(--size-full);
-		max-height: var(--size-32);
 		overflow: auto;
 		color: var(--body-text-color);
 		list-style: none;